1. Vue CLI 模式

模式和環(huán)境變量 官方文檔：https://cli.vuejs.org/zh/guide/mode-and-env.html

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

Vue CLI 默認(rèn)提供了兩個腳本命令：serve 是開發(fā)模式 build 是生產(chǎn)模式

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

可以通過 --mode 參數(shù)為命令行指定模式

# 本地運行時使用 production 模式
vue-cli-service serve --mode production
# 執(zhí)行打包時使用 development 模式
vue-cli-service build --mode development

2. Vue CLI 環(huán)境變量

環(huán)境變量配置文件只在啟動 CLI 服務(wù)的時候加載一次，如有更改，必須重啟 CLI 服務(wù)才會生效

環(huán)境變量：同一個變量名稱在不同環(huán)境下的值不同，可以在項目根目錄下創(chuàng)建下列文件來指定環(huán)境變量：

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

后面兩個以 .local 為后綴的文件之所以會被 git 忽略，是因為使用 vue create 創(chuàng)建 CLI 項目時，自帶 git 版本庫，并且在 .gitignore 中已經(jīng)忽略掉了它們，如下所示：

# local env files
.env.local
.env.*.local

環(huán)境變量文件加載優(yōu)先級：

特定模式環(huán)境文件（例如：.env.production）優(yōu)先于一般的環(huán)境文件（例如 .env），按照優(yōu)先級排列如下所示：

.env.[mode].local
.env.[mode]
.env.local
.env

環(huán)境變量文件內(nèi)容：只能定義 NODE_ENV、BASE_URL 和 VUE_APP_ 開頭的變量

NODE_ENV=development
BASE_URL="http://192.168.1.121:8090"
VUE_APP_TITLE=這是一個標(biāo)題

3. 添加測試環(huán)境文件

生產(chǎn)模式下可能會有多個環(huán)境：測試環(huán)境、正式環(huán)境

手動添加一個測試環(huán)境的環(huán)境文件，以 staging 模式為例。

第一步：首先添加一個腳本命令：build:staging

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

第二步：創(chuàng)建 .env.staging 文件，設(shè)備 NODE_ENV 為 production，然后添加其他環(huán)境變量即可，文件內(nèi)容如下所示：

NODE_ENV = production
VUE_APP_TITLE = My App (staging)

4. 讀取環(huán)境變量數(shù)據(jù)

所有環(huán)境變量數(shù)據(jù)都存放在 process.env 中，讀取環(huán)境變量示例：

// 所有環(huán)境變量
process.env
// 獲取當(dāng)前環(huán)境
process.env.NODE_ENV
// 讀取環(huán)境變量中的 VUE_APP_TITLE
process.env.VUE_APP_TITLE

5. 腳本命令配置示例

腳本命令：

{
    "scripts": {
        "serve:dev": "vue-cli-service serve",
        "serve:beta": "vue-cli-service serve --mode beta",
        "serve:prod": "vue-cli-service serve --mode production",
        "build:prod": "vue-cli-service build",
        "build:beta": "vue-cli-service build --mode beta",
        "build:dev": "vue-cli-service build --mode development"
    }
}

環(huán)境變量文件內(nèi)容：

.env.development 開發(fā)環(huán)境：

NODE_ENV=development

.env.beta 測試環(huán)境 和 .env.production 正式環(huán)境：

NODE_ENV=production