vue-cli3.0+如何为项目增加多环境配置

通常我会在项目src目录下创建一个config.js用来配置一些项目中的常量，如请求地址，请求携带的tokenKey值等等

// src/config.js
module.exports = {
  baseURL: process.env.NODE_ENV === 'production' ? 'https://prod.com' : 'http://test.com',
  apiAgent: 'goods',
  timeout: 60 * 1000,
  // 请求携带的token的Key值
  headersTokenKey: 'Authorization',
  // 项目名称
  projectName: '商品中心',
  ...
}

我们通过使用process.env.NODE_ENV来区分生产环境和开发环境，如上面配置中等baseURL，生产环境和开发环境分别使用不同域名，开发环境是我们本地run dev的时候使用的，但生产环境则不一样了，当我们将项目部署到测试环境或正式环境，

这时对于这两个项目来说都是生产环境，他们使用的baseURL都是https://prod.com，面对这种情况，我们通常会在构建测试包的时候将baseURL改为：test.com，然后再将baseURL改为https://prod.com去构建正式环境。这样看起来其实问题也不大，只要细心一点，在构建的时候明确你要build的是测试环境还是正式环境，填写正确的baseURL即可。

然而，当你的项目越来越大，配置项越来越多，例如现在需要把请求超时timeout在测试环境和正式环境也做一个区分，那么每次build的时候改动就会越来越多，如果某个配置项忘来改，一不小心就会出现把测试环境的配置要求同步到正式环境上的情况。

如果能做到不同环境分别读取不同的配置文件，例如本地开发时就读取一个config.dev.js的文件，测试环境的时候就读取一个config.test.js的文件，正式环境的时候就读取config.prod.js文件，这样互不干扰，也就不用担心build的时候会出错了。接下来就去实现这个需求。

1. 添加构建命令

打开项目的package.json文件可以看到现在只有两条命令，dev是本地开发，build是构建生产环境

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

这时我们新增加一条命令用于构建测试环境

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

2. 添加不同的环境变量区分

在脚本命令后面追加--mode，用来添加不同的环境变量

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

3. 在项目根目录下下新建对应的env文件

脚手架会根据不同的命令去读取对应的文件

npm run dev => .env.dev

npm run build => .env.prod

npm run build:test => .env.test

接下来，在刚才新建的三个文件中添加变量

// .env.dev
NODE_ENV = 'development'
VUE_APP_MODE = 'dev'

// .env.prod
NODE_ENV = 'production'
VUE_APP_MODE = 'prod'

// .env.test
NODE_ENV = 'production'
VUE_APP_MODE = 'test'

4. 根据不同的环境变量读取不同的配置文件

上面我们已经增加了VUE_APP_MODE这个变量，接下来删掉原来src下的config.js，新建config目录，config目录下分别新建dev.js、test.js、prod.js三个配置文件

// src/config/dev.js
module.exports = {
  baseURL: 'http://dev.com',
  ...
}

// src/config/test.js
module.exports = {
  baseURL: 'http://test.com',
  ...
}

// src/config/prod.js
module.exports = {
  baseURL: 'http://prod.com',
  ...
}

再新建index.js，index.js根据VUE_APP_MODE去导入对应的配置。

// src/config/index.js
module.exports = {
  ...require(`./${process.env.VUE_APP_MODE}`),
  // 对于不需要区分不同环境变量的配置项，可以放在index.js中
  headersTokenKey: 'Authorization',
}

如果出现以下警告信息之类的信息

 warning  in ./src/store/module/app.js

"export 'AuthTokenKey' was not found in '@/config'

修改.babelrc

{
  "presets": [
    ["@babel/preset-env",{"modules": "commonjs"}], // 增加
    "@vue/app"
  ],
  "plugins": ["transform-es2015-modules-commonjs"] // 增加
}

最后下载依赖包

npm i babel-plugin-transform-es2015-modules-commonjs -D

重新npm run dev后一切正常

至此，关于在vue-cli3下的多环境配置改造就完成了。对于vue-cli2的改造，下次再记录一下