vue cli中的env詳解

前言

相信使用過 vueCli 開發項目的小伙伴有點郁悶，正常開發時會有三個接口環境（開發，測試，正式），但是 vueCli 只提供了兩種 development,production(不包含 test-單測)模式。其實這是小伙伴們沒有理解 vueCli 文檔所導致的。

vueCli 命令中 --mode 對應的 .env.[mode]，而不是 NODE_ENV

注意

除了 VUE_APP_ 變量之外。

還有兩個特殊的變量：

NODE_ENV： 是 development、production、test 中的一個。其值取決於應用運行的模式。

BASE_URL： 和 vue.config.js 中的 publicPath 選項相符，即你的應用會部署到的基礎路徑。

簡介-官方

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

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

你可以通過傳遞 --mode 選項參數為命令行覆寫默認的模式。

當運行 vue-cli-service 命令時，所有的環境變量都從對應的環境文件中載入。如果文件內部不包含 NODE_ENV 變量，它的值將取決於模式，例如，在 production 模式下被設置為 "production"，在 test 模式下被設置為 "test"，默認則是 "development"。

NODE_ENV 將決定您的應用運行的模式，是開發，生產還是測試，因此也決定了創建哪種 webpack 配置。

例如通過將 NODE_ENV 設置為 "test"，Vue CLI 會創建一個優化過后的，並且旨在用於單元測試的 webpack 配置，它並不會處理圖片以及一些對單元測試非必需的其他資源。

同理，NODE_ENV=development 創建一個 webpack 配置，該配置啟用熱更新，不會對資源進行 hash 也不會打出 vendor bundles，目的是為了在開發的時候能夠快速重新構建。

當你運行 vue-cli-service build 命令時，無論你要部署到哪個環境，應該始終把 NODE_ENV 設置為 "production" 來獲取可用於部署的應用程序。

示例配置

我們現在有三個配置文件，分別如下

#.env.development
NODE_ENV=development
VUE_APP_AXIOS_BASEURL=http://xxxx

#.env.preview 測試環境的配置
NODE_ENV=production
VUE_APP_AXIOS_BASEURL=http://xxxx

#.env.production
NODE_ENV=production
VUE_APP_AXIOS_BASEURL=http://xxxx

在 axios 中使用

import axios from "axios";
const conf = {
  baseURL: process.env.VUE_APP_AXIOS_BASEURL,
};
return axios.create(conf);

package.json 配置

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

啟動方式

npm run serve # 默認 dev
npm run build # 測試環境
npm run build:release # 正式環境