vue-cli增加新的环境

需求： h5项目线上存在两个不同的域名，请求的接口域名也不同，所以希望可以通过添加一个打包环境的方法，做到使用不同的打包命令，使用不同的域名

项目一般默认为development、production两个环境，现在增加一个环境 test

1、在package.json中增加新的打包命令

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-dev": "vue-cli-service build --mode development",
    "build-test": "vue-cli-service build --mode test",
  },

2、项目根目录下已经存在 .env、.env.production文件，增加VUE_APP_ENV作为环境判断

.env

NODE_ENV = 'development'
VUE_APP_ENV = 'development'

.env.production

NODE_ENV = 'production'
VUE_APP_ENV = 'production'

新增 .env.test

NODE_ENV = 'production'
VUE_APP_ENV = 'test'

以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中

之后就可以通过process.env.NODE_ENV，判断环境不同切换不同的域名，同为 production 时根据process.env.VUE_APP_ENV 进一步判断