我們可以在項(xiàng)目根目錄中的下列文件來指定環(huán)境變量:
.env # 在所有的環(huán)境中被載入
.env.local # 在所有的環(huán)境中被載入,但會(huì)被 git 忽略
.env.[mode] # 只在指定的模式中被載入
.env.[mode].local # 只在指定的模式中被載入短绸,但會(huì)被 git 忽略
一個(gè)環(huán)境文件只包含環(huán)境變量的“鍵=值”對(duì),并且必須以VUE_APP開始:
FOO=bar //無效
VUE_APP_SECRET=secret 有效
模式
模式是 Vue CLI 項(xiàng)目中一個(gè)重要的概念。默認(rèn)情況下当辐,一個(gè) Vue CLI 項(xiàng)目有三個(gè)模式:
-
development
模式用于vue-cli-service serve
-
production
模式用于vue-cli-service build
和vue-cli-service test:e2e
-
test
模式用于vue-cli-service test:unit
了解模式以后,我們可以為對(duì)應(yīng)環(huán)境設(shè)置相應(yīng)的環(huán)境變量鲤看,比如:
為production
設(shè)置.env.production
為development
設(shè)置.env.development
*為一個(gè)特定模式準(zhǔn)備的環(huán)境文件 (例如.env.production
) 將會(huì)比一般的環(huán)境文件 (例如.env
) 擁有更高的優(yōu)先級(jí)
如果只需要在本地使用的話缘揪,可以在后面加入.local,比如.env.local
,會(huì)git 忽略
在客戶端側(cè)代碼中,可以使用process.env.VUE_APP_*
獲取應(yīng)用
注:process.env.NODE_ENV义桂,獲取應(yīng)用運(yùn)行模式("development"
找筝、"production"
或"test"
)
process.env.BASE_URL,應(yīng)用基礎(chǔ)路徑(vue.config.js
中的publicPath
選項(xiàng))