uniApp h5项目/小程序项目通过命令行打包 一个项目二端适配

• 移动开发

在这里插入图片描述

文章目录

          • 一、打包环境
            • 1. 环境版本
            • 2. 搭建环境
          • 二、创建项目
            • 2.1. HBuilder X创建项目
            • 2.2. cli创建项目
            • 2.3. H5项目移植
            • 2.4. 项目运行
            • 2.5. 打包个性化配置
            • 2.6. 项目打包
          • 三、项目开发
            • 3.1. 开发模式运行项目
            • 3.2. 验证实时编译
          • 四、异常汇总
            • 4.1. node-sass报错
一、打包环境
1. 环境版本
软件 版本
nodejs v14.17.5
vue/cli 4.5.15
vue 2.x
2. 搭建环境

安装nodejs

win：
https://nodejs.org/download/release/v14.17.5/node-v14.17.5-x64.msi

linux：
https://nodejs.org/download/release/v14.17.5/node-v14.17.5-linux-x64.tar.xz

linux安装流程：

wget https://nodejs.org/download/release/v14.17.5/node-v14.17.5-linux-x64.tar.xz
tar -xvf node-v14.17.5-linux-x64.tar.xz
mv node-v14.17.5-linux-x64 nodejs

ln -s /app/nodejs/bin/node /usr/local/bin/
ln -s /app/nodejs/bin/npm /usr/local/bin/
node -v

https://nodejs.org/download/release/v14.17.5/

在这里插入图片描述

卸载默认vue/cli

npm uninstall -g @vue/cli

安装vue/cli

npm install -g @vue/cli@4.5.15
二、创建项目
2.1. HBuilder X创建项目

my-project-x

在这里插入图片描述

修改展示文字为 gblfy.com

在这里插入图片描述

2.2. cli创建项目

通过cli新建一个项目

vue create -p dcloudio/uni-preset-vue my-project-cli

选择默认版本（直接敲回车键）

在这里插入图片描述

创建好的项目结构

在这里插入图片描述

2.3. H5项目移植

把my-project-cli 项目src下面的文件全部删除

把uniapp文件全选复制到my-project-cli 项目src下面,不需要做任何修改

在这里插入图片描述

在这里插入图片描述

2.4. 项目运行
cd my-project-cli
npm run serve

在这里插入图片描述

在这里插入图片描述

2.5. 打包个性化配置

指定打包输出路径，这个配置不需要可以跳过

编辑my-project-cli下面的package.json

在这里插入图片描述

在build:h5下面新增2行配置

在这里插入图片描述

"build:h5_test": "cross-env NODE_ENV=production UNI_PLATFORM=h5 UNI_OUTPUT_DIR=dist/build/h5_test vue-cli-service uni-build",
"build:h5_prod": "cross-env NODE_ENV=production UNI_PLATFORM=h5 UNI_OUTPUT_DIR=dist/build/h5_prod vue-cli-service uni-build",
2.6. 项目打包

默认打包，执行打包后会生成dist文件夹，dist/build/h5就是打包后的静态文件夹，把他放到服务器上就可以

npm run build:h5

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

测试打包，执行打包后会生成dist文件夹，dist/build/h5_test就是打包后的静态文件夹，把他放到服务器上就可以

npm run build:h5_test

在这里插入图片描述

二者不同就是打包后的文件夹名称，其他的都一样

三、项目开发
3.1. 开发模式运行项目

在这里插入图片描述

选择内置终端

在这里插入图片描述

在这里插入图片描述

3.2. 验证实时编译

修改标题内容是否支持实施编译

把gblfy.com改成gblfy.com 666

在这里插入图片描述

在这里插入图片描述

从上面截图可以看出，支持实施编译

四、异常汇总
4.1. node-sass报错

script中已经提前帮我们配置好了，你需要什么环境也可以自己再配，方便快捷，看着眼前一亮。没想到真正跑起来发现缺少了很多依赖包，按照提示，一个一个全部装一遍。在这期间，大家也许会遇到一个node-sass报错，就像这样：incompatible with ^4.0.0，这是因为node-sass兼容问题，解决方法：

npm uninstall node-sass
npm install node-sass@4.14.1

重新运行项目即可

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/ec2d9551a0.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐