vue-cli3配置環境變量

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

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

模式是 Vue CLI 項目中一個重要的概念。默認情況下，一個 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，一個模式可以包含多個環境變量。也就是說，每個模式都會將 NODE_ENV的值設置為模式的名稱——比如在 development 模式下 NODE_ENV 的值會被設置為 "development"。

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

你可以通過傳遞 --mode 選項參數為命令行覆寫默認的模式。例如，如果你想要在構建命令中使用開發環境變量，請在你的 package.json 腳本中加入：

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

示例：Staging 模式

假設我們有一個應用包含以下 .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 文件然后構建出生產環境應用；

• vue-cli-service build --mode staging 會在 staging 模式下加載可能存在的 .env、.env.staging和 .env.staging.local 文件然后構建出生產環境應用。

這兩種情況下，根據 NODE_ENV，構建出的應用都是生產環境應用，但是在 staging 版本中，process.env.VUE_APP_TITLE 被覆寫成了另一個值。

在客戶端側代碼中使用環境變量

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

console.log(process.env.VUE_APP_SECRET)