uni-app h5打包后如何部署到测试和生产环境

落日映苍穹つ 2023-08-17 16:50 130阅读 0赞

## 需求：打包测试，生成环境H5包 ##

**需求分析：其实就是不同环境调用不同的api地址**

1.  首先使用vue-cli创建uni-app
2.  找到package.json文件script配置如下：

"scripts": {
       "serve": "npm run dev:h5",
       "build": "npm run build:h5",
       "build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
       "build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
       "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
       "build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
       "build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
       "build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
       "build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
       "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
       "dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
       "dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",
       "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
       "test:h5": "vue-cli-service build --no-clean --mode build",
       "dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
       "dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
       "dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
       "dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
       "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
       "info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js"
     }

//主要是增加这一句配置:`"test:h5": "vue-cli-service build --no-clean --mode build"`  
3. App.vue中  
`globalData: { userInfo: null, baseUrl:process.env.NODE_ENV==='development'?'测试环境路径':'生产环境路径' }`  
4. 执行代码:`cnpm run test:h5`就会生成dist文件下有dev下H5包放到服务器就好啦  
**这只是我的方式目前看来是可行的**  
*曾出现报错信息如下*  
‘cross-env’ 不是内部或外部命令，也不是可运行的程序  
解决：`cnpm i cross-env --save-dev`