Vue CLI 環(huán)境變量和模式

你可以替換你的項目根目錄中的下列文件來指定環(huán)境變量：

.env                # 在所有的環(huán)境中被載入
.env.local          # 在所有的環(huán)境中被載入，但會被 git 忽略
.env.[mode]         # 只在指定的模式中被載入
.env.[mode].local   # 只在指定的模式中被載入，但會被 git 忽略

一個環(huán)境文件只包含環(huán)境變量的“鍵=值”對：

FOO=bar
VUE_APP_SECRET=secret

被載入的變量將會對 vue-cli-service 的所有命令、插件和依賴可用。

環(huán)境加載屬性

為一個特定模式準(zhǔn)備的環(huán)境文件的 (例如 .env.production) 將會比一般的環(huán)境文件 (例如 .env) 擁有更高的優(yōu)先級。

此外，Vue CLI 啟動時已經(jīng)存在的環(huán)境變量擁有最高優(yōu)先級，并不會被 .env 文件覆寫。

NODE_ENV

如果在環(huán)境中有默認(rèn)的 NODE_ENV，你應(yīng)該移除它或在運(yùn)行 vue-cli-service 命令的時候明確地設(shè)置 NODE_ENV。

模式

模式是 Vue CLI 項目中一個重要的概念。默認(rèn)情況下，一個 Vue CLI 項目有三個模式：

• development 模式用于 vue-cli-service serve
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
• test 模式用于 vue-cli-service test:unit

注意模式不同于 NODE_ENV，一個模式可以包含多個環(huán)境變量。也就是說，每個模式都會將 NODE_ENV 的值設(shè)置為模式的名稱——比如在 development 模式下 NODE_ENV 的值會被設(shè)置為 "development"。

你可以通過為 .env 文件增加后綴來設(shè)置某個模式下特有的環(huán)境變量。比如，如果你在項目根目錄創(chuàng)建一個名為 .env.development 的文件，那么在這個文件里聲明過的變量就只會在 development 模式下被載入。

你可以通過傳遞 --mode 選項參數(shù)為命令行覆寫默認(rèn)的模式。例如，如果你想要在構(gòu)建命令中使用開發(fā)環(huán)境變量，請在你的 package.json 腳本中加入：

"dev-build": "vue-cli-service build --mode development",

示例：Staging 模式

假設(shè)我們有一個應(yīng)用包含以下 .env 文件：

VUE_APP_TITLE=My App

和 .env.staging 文件：

NODE_ENV=production
VUE_APP_TITLE=My App (staging)

• vue-cli-service build 會加載可能存在的 .env、.env.production 和 .env.production.local 文件然后構(gòu)建出生產(chǎn)環(huán)境應(yīng)用；
• vue-cli-service build --mode staging 會在 staging 模式下加載可能存在的 .env、.env.staging 和 .env.staging.local 文件然后構(gòu)建出生產(chǎn)環(huán)境應(yīng)用。

這兩種情況下，根據(jù) NODE_ENV，構(gòu)建出的應(yīng)用都是生產(chǎn)環(huán)境應(yīng)用，但是在 staging 版本中，process.env.VUE_APP_TITLE 被覆寫成了另一個值。

在客戶端側(cè)代碼中使用環(huán)境變量

只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中。你可以在應(yīng)用的代碼中這樣訪問它們：

console.log(process.env.VUE_APP_SECRET)

在構(gòu)建過程中，process.env.VUE_APP_SECRET 將會被相應(yīng)的值所取代。在 VUE_APP_SECRET=secret 的情況下，它會被替換為 "secret"。

除了 VUE_APP_* 變量之外，在你的應(yīng)用代碼中始終可用的還有兩個特殊的變量：

• NODE_ENV - 會是 "development"、"production" 或 "test" 中的一個。具體的值取決于應(yīng)用運(yùn)行的模式。
• BASE_URL - 會和 vue.config.js 中的 publicPath 選項相符，即你的應(yīng)用會部署到的基礎(chǔ)路徑。

所有解析出來的環(huán)境變量都可以在 public/index.html 中以 HTML 插值中介紹的方式使用。

提示

你可以在 vue.config.js 文件中計算環(huán)境變量。它們?nèi)匀恍枰?nbsp;VUE_APP_ 前綴開頭。這可以用于版本信息 process.env.VUE_APP_VERSION = require('./package.json').version。

只在本地有效的變量

有的時候你可能有一些不應(yīng)該提交到代碼倉庫中的變量，尤其是當(dāng)你的項目托管在公共倉庫時。這種情況下你應(yīng)該使用一個 .env.local 文件取而代之。本地環(huán)境文件默認(rèn)會被忽略，且出現(xiàn)在 .gitignore 中。

.local 也可以加在指定模式的環(huán)境文件上，比如 .env.development.local 將會在 development 模式下被載入，且被 git 忽略。