1 .env 用途
項目實際開發(fā)過程中蓄氧，可能會有區(qū)分環(huán)境的需求，比如開發(fā)環(huán)境阴绢、測試環(huán)境店乐、生產(chǎn)環(huán)境等；不同的環(huán)境對應(yīng)不同的配置呻袭，比如開發(fā)環(huán)境眨八、生產(chǎn)環(huán)境的后端接口 BaseURL 一般都不同；此時可以使用 .env 文件來實現(xiàn)環(huán)境差異化配置左电。
2 .env 讀取規(guī)則
在介紹 .env 文件的讀取規(guī)則前廉侧，需先了解一下 vue-cli 的模式页响。
默認情況下，一個 Vue CLI 項目有三個模式：
-
development模式用于vue-cli-service serve -
test模式用于vue-cli-service test:unit -
production模式用于vue-cli-service build和vue-cli-service test:e2e
你可以通過傳遞 --mode 選項參數(shù)為命令行覆寫默認的模式段誊。
vue-cli 會根據(jù)模式參數(shù)自動從環(huán)境文件中載入環(huán)境變量闰蚕。項目中一般會在package.json的scripts中配置命令腳本，映射vue-cli的命令连舍。
// package.json
"scripts": {
"serve": "vue-cli-service serve",
"serve:diy": "vue-cli-service serve --mode diy",
"serve:custom": "vue-cli-service serve --mode dev.custom",
"build": "vue-cli-service build",
"build:develop": "vue-cli-service build --mode development",
"build:custom": "vue-cli-service build --mode pro.custom",
"lint": "vue-cli-service lint"
}
-
serve命令后沒有指定模式時陪腌，默認讀取.env(如有)和.env. development(如有)。 -
serve:diy命令會讀取.env(如有)和.env. diy(如有)烟瞧。 -
serve:custom命令會讀取.env(如有)和.env. dev.custom(如有)诗鸭。 -
build命令后沒有指定模式時，默認讀取.env(如有)和.env. production(如有)参滴。 -
build:develop命令會讀取.env(如有)和.env. development(如有)强岸。 -
build: custom命令會讀取.env(如有)和.env. pro.custom(如有)。
3 .env 加載優(yōu)先級
為一個特定模式準(zhǔn)備的環(huán)境文件 (例如 .env.production) 將會比全局環(huán)境文件 (即 .env) 擁有更高的優(yōu)先級砾赔。
因此當(dāng) .env.production 中有與 .env 重復(fù)的鍵值時蝌箍，.env.production 中的生效。
4 .env 書寫規(guī)則
- 一個環(huán)境文件只包含環(huán)境變量的“鍵=值”對暴心。
- 只有 NODE_ENV妓盲，BASE_URL 和以 VUE_APP_ 開頭的變量將通過 webpack.DefinePlugin 靜態(tài)地嵌入到客戶端側(cè)的代碼中。即自定義屬性只能以
VUE_APP_開頭专普。
5 訪問環(huán)境變量
通過nodejs的process.env來訪問所有環(huán)境變量悯衬。
Vue.prototype.$env = process.env
console.log(this.$env.VUE_APP_BASEURL)
