文件命名
必須以如下方式命名，不要亂起名齿拂，也無需專門手動控制加載哪個文件
| 命名 | 說明 | 加載 |
|---|---|---|
| .env | 全局默認(rèn)，任何環(huán)境都加載合并 | |
| .env.development | 開發(fā)環(huán)境下的配置文件 | npm run serve |
| .env.production | 生產(chǎn)環(huán)境下的配置文件 | npm run build |
文件內(nèi)容
屬性名必須以VUE_APP_開頭肴敛，比如VUE_APP_XXX
只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中署海，NODE_ENV 和 BASE_URL 是兩個特殊變量，在代碼中始終可用
.env (serve默認(rèn)的環(huán)境變量)
NODE_ENV = 'development'
VUE_APP_BASE_API = 'https://demo.cn/api'
VUE_APP_URL = 'https://wechat-timg.oss-cn-hangzhou.aliyuncs.com/demo'
.env.production (build默認(rèn)的環(huán)境變量)
NODE_ENV = 'production'
VUE_APP_BASE_API = 'https://demo.com/api'
VUE_APP_URL = 'https://img-wechat.oss-cn-hangzhou.aliyuncs.com/demo'
.env.analyz (用于webpack-bundle-analyzer打包分析)
NODE_ENV = 'production'
IS_ANALYZ = 'analyz'
VUE_APP_BASE_API = 'https://demo.com/api'
VUE_APP_URL = 'https://img-wechat.oss-cn-hangzhou.aliyuncs.com/demo'
修改package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"analyz": "vue-cli-service build --mode analyz",
"lint": "vue-cli-service lint"
}
文件的加載
根據(jù)啟動命令vue會自動加載對應(yīng)的環(huán)境医男，vue是根據(jù)文件名進(jìn)行加載的砸狞，所以上面說“不要亂起名，也無需專門控制加載哪個文件”
比如執(zhí)行npm run serve命令镀梭，會自動加載.env.development文件
獲取環(huán)境變量
通過process.env.VUE_APP_XXX獲取環(huán)境變量
（全局屬性刀森，任何地方均可使用）
data():{
return{
url:process.env.VUE_APP_URL
}
}
參考：https://blog.csdn.net/w405722907/article/details/94720868
https://segmentfault.com/a/1190000017008697
