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

在这里插入图片描述

文章目录

一、打包环境

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/[email protected]

二、创建项目

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 [email protected]

重新运行项目即可