需求場景：工作中我們會遇到測試和生產環(huán)境文件下載地址區(qū)分的問題蛉加，之前由于是代碼寫死的惜颇，因此每次遇到文件下載的都需要改代碼手動去修改抬闷，如果上線的時候忘了修改回來的話妇蛀，將是線上的一個bug。
解決思路：
使用環(huán)境變量配置區(qū)分測試和生產環(huán)境笤成。由此想到使用process.env里面配置來進行區(qū)分评架。
先來看一下process.env怎么進行配置的。
第一步
在根目錄下新建.env.development和.env.production炕泳，內部聲明變量
第二步
在.env.production中配置變量為下面內容纵诞，測試環(huán)境配置測試，“prod”標識自己定就可以
#只能使用VUE_APP開頭的培遵，其他的自定義的會被過濾掉具體實現(xiàn)看源碼
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參數(shù)不然那不起作用浙芙，是按照默認的配置去走的。
"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",
},
第四步
如果是在生產環(huán)境則無需其他配置籽腕，忽略第4步嗡呼。
如果需要在測試環(huán)境上構建時，需要在配置構建命令為npm run build:test否則不會讀取到配置皇耗，默認使用Npm run build生產環(huán)境配置南窗。
image.png
