vue cli中的env詳解

guojikun發表於2021-08-19
Vue

前言

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

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

::: tip 注意
除了 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 # 正式環境

相關文章