一、打包环境
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兼容问题，解决方法：文章来源：https://www.toymoban.com/news/detail-646647.html
npm uninstall node-sass
npm install node-sass@4.14.1
重新运行项目即可文章来源地址https://www.toymoban.com/news/detail-646647.html
到了这里，关于uniApp h5项目/小程序项目通过命令行打包 一个项目二端适配的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
