vue-cli-service build 不同環境配置

背景

在項目部署時，我們需要在測試環境和生產環境使用不同的變量。
vue-cli提供了vue-cli-service build打包命令，然而vue-cli-service build默認的環境變量值則為production。那我們通過npm run build打包構建，想要實現不同環境使用不同變量，暫時不能實現。

vue-cli-service介紹

vue-cli-service介紹
vue-cli生成項目時，在package.json中會設置：

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

vue-cli-service serve 命令會啟動一個開發服務器，默認指定的環境模式為development。
vue-cli-service build 會在 dist/ 目錄產生一個可用於生產環境的包，帶有 JS/CSS/HTML 的壓縮，和為更好的緩存而做的自動的 vendor chunk splitting。

環境變量和模式

在項目的根目錄下我們可以創建不同模式的文件：

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

一般來說，我們會存在本地環境、測試環境、線上環境，那我們就需要創建三個模式文件。

• .env.development開發環境模式

// 環境變量
NODE_ENV=development
// 以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中
VUE_APP_ENV = 'development'

• .env.test測試環境模式

// 環境變量（這里的環境變量是跟打包有關的，production則會進行壓縮代碼等，真正跟每個環境有關的變量是下面以VUE_APP開頭的變量）
NODE_ENV=production
// 以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中
VUE_APP_ENV = 'test'

• .env.production線上環境模式

// 環境變量
NODE_ENV=production
// 以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中
VUE_APP_ENV = 'production'

配置不同模式

部署時，構建打包執行npm run build，則會執行vue-cli-service build，默認模式為production，對應.env.production文件，取此文件中的環境變量。

想要配置測試環境，需要在scripts下增加腳本：

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

測試環境打包構建時，執行npm run build-test即可。

index.html使用環境變量

在index.html中可通過<%= process.env.VUE_APP_xxx %>的方式獲取不同模式下配置的環境變量。

驗證

可通過不同模式下對應的環境變量，判斷是否為對應的環境