前言

相信使用過 vueCli 開發(fā)項目的小伙伴有點郁悶，正常開發(fā)時會有三個接口環(huán)境（開發(fā)，測試，正式），但是 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 選項參數(shù)為命令行覆寫默認的模式。

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

NODE_ENV 將決定您的應用運行的模式，是開發(fā)，生產(chǎn)還是測試，因此也決定了創(chuàng)建哪種 webpack 配置。

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

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

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

示例配置

我們現(xiàn)在有三個配置文件，分別如下

#.env.development
NODE_ENV=development
VUE_APP_AXIOS_BASEURL=http://xxxx
#.env.preview 測試環(huán)境的配置
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 # 測試環(huán)境
npm run build:release # 正式環(huán)境

到此這篇關于vue cli中env的使用指南的文章就介紹到這了,更多相關vue cli env內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論