文章目录
一、打包环境
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.msilinux：https://nodejs.org/download/release/v14.17.5/node-v14.17.5-linux-x64.tar.xzlinux安装流程：
wget https://nodejs.org/download/release/v14.17.5/node-v14.17.5-linux-x64.tar.xztar -xvf node-v14.17.5-linux-x64.tar.xzmv node-v14.17.5-linux-x64 nodejsln -s /app/nodejs/bin/node /usr/local/bin/ln -s /app/nodejs/bin/npm /usr/local/bin/node -vhttps://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-clinpm 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-sassnpm install node-sass@4.14.1重新运行项目即可
来源地址：https://blog.csdn.net/weixin_40816738/article/details/130236602
