使用环境变量配置区分不同环境

需求场景：工作中我们会遇到测试和生产环境文件下载地址区分的问题，之前由于是代码写死的，因此每次遇到文件下载的都需要改代码手动去修改，如果上线的时候忘了修改回来的话，将是线上的一个bug。

解决思路：

使用环境变量配置区分测试和生产环境。由此想到使用process.env里面配置来进行区分。
先来看一下process.env怎么进行配置的。

第一步

在根目录下新建.env.development和.env.production，内部声明变量

第二步

在.env.production中配置变量为下面内容，测试环境配置测试，“prod”标识自己定就可以

#只能使用VUE_APP开头的，其他的自定义的会被过滤掉具体实现看源码
VUE_APP_FILE_PATH = 'prod'

源码路径node_modules@vue\cli-service\lib\util\resolveClientEnv.js

const prefixRE = /^VUE_APP_/

module.exports = function resolveClientEnv (options, raw) {
  const env = {}
  Object.keys(process.env).forEach(key => {
//只有以VUE_APP或者NODE_ENV的key才会进行设置
    if (prefixRE.test(key) || key === 'NODE_ENV') {
      env[key] = process.env[key]
    }
  })
  env.BASE_URL = options.publicPath

  if (raw) {
    return env
  }

  for (const key in env) {
    env[key] = JSON.stringify(env[key])
  }
  return {
    'process.env': env
  }
}

第三步

在package.json中配置 "build": "vue-cli-service build --mode production",需要加上--mode production参数不然那不起作用，是按照默认的配置去走的。

 "scripts": {
    "start:dev": "set BUILD_ENV=TEST && npm run dev",
    "dev": "vue-cli-service serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode production",
    "build:test": "vue-cli-service build --mode test",
  },

第四步

如果是在生产环境则无需其他配置，忽略第4步。
如果需要在测试环境上构建时，需要在配置构建命令为npm run build:test否则不会读取到配置，默认使用Npm run build生产环境配置。

image.png