有時候我們在開發專案時，會遇到開發環境跟正式環境資料不一樣的狀況，比較常見的就是域名不同，
最近我遇到的需求是，上正式站時，某個連結網址要換成正式站網址，但開發環境要用測試連結，那我們可以怎麼做呢?
像這種時候，可以使用環境變量，簡單解決各個環境的問題。

模式

在開發的過程中，通常會有三種階段: 開發環境、測試環境、生產環境(正式環境)。

1
2
3

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

設定每個環境下的模式，serve、build 本身就有預設值，如沒要特別改，可省略--mode，你也可以自己定義模式環境，比如新建一個叫的staging模式，是用於構建生產環境的，但一些變量不同

"scripts": {
  "serve": "vue-cli-service serve", // 等同vue-cli-service serve --mode development
  "build": "vue-cli-service build", // 等同vue-cli-service build --mode production
  "lint": "vue-cli-service lint",
  "staging" :"vue-cli-service build --mode staging" // 自訂 staging 模式
}

環境變量

Cli-3.0總共提供了四種方式來制定環境變量

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

不同的文件會在不同環境中被載入

.env                      // 會在所有的環境中被載入
.env.local                // 會在所有環境中載入，但只限於本地
.env.development          // 只在開發環境中被載入
.env.production           // 只在生產環境中被載入
.env.development.local    // 會在本地開發環境中載入

運行相關命令的時候，會根據不同環境載入不同的文件，以至於能正確讀到文件裡的變量。載入的優先級別是：

1	.env.[ mode ].local > .env.[ mode ] > .env

在文件中，我們只需要以key=value的方式就可以設置變量了

1 2	FOO=bar VUE_APP_SECRET=secret

設置完環境變量之後就可以在我們的項目中使用這兩個變量了。

請注意，只有NODE_ENV，BASE_URL和以 VUE_APP_ 開頭的變量將通過 webpack.DefinePlugin 靜態地嵌入到客戶端側的代碼中。這是為了避免意外公開機器上可能具有相同名稱的私鑰。
在webpack配置中使用，沒什麽限制，可以直接通過process.env.XXX來使用

示例：建立 Staging 模式

首先在項目根目錄下新建.env.staging文件

1 2	NODE_ENV=production VUE_APP_TITLE=My App (staging)

package.json 設定 --mode staging

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "staging" :"vue-cli-service build --mode staging"
}

下指令
npm run staging
會在staging 模式下加載可能存在的.env、.env.staging和 .env.staging.local 文件然後構建出生產環境應用

以上是我的學習筆記，希望也有幫助到你哦 😀

參考文獻:

官方-模式和環境變量
 vue-cli3.0入门-环境变量和模式配置

nuxt.js 配置參考

nuxt.js配置基本域名和NODE_ENV環境變數

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Lala Code

Vue 的環境變量

模式

環境變量

示例：建立 Staging 模式

參考文獻:

nuxt.js 配置參考

🚀線上課程分享

Hahow

六角學院

Udemy