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