vue cli中的env詳解

guojikun發表於2021-08-19

前言

相信使用過 vueCli 開發專案的小夥伴有點鬱悶,正常開發時會有三個介面環境(開發,測試,正式),但是 vueCli 只提供了兩種 development,production(不包含 test-單測)模式。其實這是小夥伴們沒有理解 vueCli 文件所導致的。

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

::: tip 注意
除了 VUE_APP_ 變數之外。

還有兩個特殊的變數:

NODE_ENV: 是 developmentproductiontest 中的一個。其值取決於應用執行的模式。

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 # 正式環境

相關文章