uni-app h5 多环境配置

uni开发的小程序，一键转h5

1、通过vue-cli脚手架创建uni-app项目

2、通过jenkins自动打包部署配置多环境，首先尝试

"scripts": {
    "build:dev": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-build",
    "build:prod": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
}

然而修改NODE_ENV发现不生效，构建成功页面却没有变更，多次尝试发现NODE_ENV只能为production页面才会变更？？？还有这种事？

观察dist文件夹

原来NODE_ENV = production构建时会在dist目录下生成一个build文件夹

而当NODE_ENV != production时，会在dist目录下生成一个dev文件夹

而jenkins脚本固定读取build文件夹，才导致了以上问题。

3、由于是vue-cli的脚手架，于是使用VUE_APP_开头的变量定义环境变量，而NODE_ENV定义打包输出的文件夹

"scripts": {
    "build:dev": "cross-env VUE_APP_ENV=dev NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
    "build:prod": "cross-env VUE_APP_ENV=prod NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
}

4、至此已经能区分环境了，但是以下配置可以在不同环境有很多配置项的时候更方便一点

参考自社区问答：ask.dcloud.net.cn/question/73…

在根目录下创建.env.js，.env.dev.js，.env.prod.js这三个文件

.env.js

(function () {
  let ENV_VAR = null
  switch (process.env.VUE_APP_PLATFORM) {
    case 'h5':
      //访问路径
      ENV_VAR = require(`./.env.${process.env.VUE_APP_ENV}`);
      break
    default:
      console.warn('error')
      break
  }
  if (ENV_VAR) {
    process.uniEnv = Object.create({})
    for (let key in ENV_VAR) {
      process.uniEnv[key] = ENV_VAR[key];
    }
  }
})()

.env.dev.js

const UNI_APP = {  
    BASE_API: '/dev-api'  
}  

module.exports = UNI_APP;

.env.prod.js

const UNI_APP = {  
    BASE_API: '/prod-api'  
}  

module.exports = UNI_APP;

最后在App.vue引入.env.js，.env.js起到一个总控的作用，根据VUE_APP_ENV变量的值加载不同的文件，起到环境变量切换的效果。有一点需要注意的是，我们需使用process.uniEnv.xxx来获取我们设置的全局变量值。