vue-cli不同环境配置与构建

背景

在h5应用开发中，仅有一个配置文件（static/js/config.js）用于维护环境变量，这样当从tst分支merge代码到prd分支时，会将prd环境的配置文件中prd环境地址覆盖成tst环境地址，需要再修改为prd环境地址后并注释掉vconsole提交代码至master。

解决办法

1. 将环境变量抽离出来分别存到三套环境（prd/tst/dev）的配置文件中，配置文件放在根目录下

开发环境，文件名：.env.development

NODE_ENV = 'development'
VUE_APP_ENV = 'dev'
VUE_APP_BASE_URL = 'https://tst-xxx.com'

测试环境，文件名：.env.tst

NODE_ENV = 'production'
VUE_APP_ENV = 'tst'
VUE_APP_BASE_URL = 'https://tst-xxx.com'

生产环境，文件名：.env.prd

NODE_ENV = 'production'
VUE_APP_ENV = 'prd'
VUE_APP_BASE_URL = 'https://prd-xxx.com'

2. 将原配置文件（static/js/config.js）中的地址改成环境变量对应的地址

这样当处于开发环境时，baseUrl就对应：https://tst-xxx.com/api，其他所有原来直连地址的地方都改成process.env.VUE_APP_BASE_URL+字符串拼接的形式

const baseReq = {
    baseUrl:process.env.VUE_APP_BASE_URL+'/api'
};

export default baseReq;

3. H5开发时，生产环境不需要vconsole，其他环境都需要引入vconsole，在main.js中增加环境的判断，来决定是否引入vconsole

if(process.env.VUE_APP_ENV!=='prd'){
  new (require('vconsole'))
}

4. 更改package.json中的命令配置

这样运行npm run build-prd时，就会调用.env.prd文件中设置的环境信息

如果使用Jenkins发版，更改不同环境的构建命令即可，例如prd环境：npm run build-prd

{
    "scripts": {
        "serve": "vue-cli-service serve", // 对应.env.development文件
        "build-prd": "vue-cli-service build --mode prd", //对应.env.prd文件
        "build-tst": "vue-cli-service build --mode tst", //对应.env.tst文件
  },
}

5. 更改vue.config.js中的publiPath

将module.exports中的publicPath改成：（这块我没发现有什么用，直接设置成'/'或'./'也没报错）

publicPath: process.env.NODE_ENV === 'production'? './':'/'

总结

分离出三个配置文件后，解决了每次merge代码重新更改地址与vconsole注释的二次代码提交的麻烦，这样使开发流程更加高效，减少了不必要的操作。