前言

相信使用過(guò) vueCli 開發(fā)項(xiàng)目的小伙伴有點(diǎn)郁悶，正常開發(fā)時(shí)會(huì)有三個(gè)接口環(huán)境（開發(fā)，測(cè)試，正式），但是 vueCli 只提供了兩種 development,production(不包含 test-單測(cè))模式。其實(shí)這是小伙伴們沒(méi)有理解 vueCli 文檔所導(dǎo)致的。

vueCli 命令中 --mode 對(duì)應(yīng)的 .env.[mode]，而不是 NODE_ENV

注意

除了 VUE_APP_ 變量之外。

還有兩個(gè)特殊的變量：

• NODE_ENV： 是 development、production、test 中的一個(gè)。其值取決于應(yīng)用運(yùn)行的模式。
• BASE_URL： 和 vue.config.js 中的 publicPath 選項(xiàng)相符，即你的應(yīng)用會(huì)部署到的基礎(chǔ)路徑。

簡(jiǎn)介-官方

mode 是 Vue CLI 項(xiàng)目中一個(gè)重要的概念。默認(rèn)情況下，一個(gè) Vue CLI 項(xiàng)目有三個(gè)模式：

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

你可以通過(guò)傳遞 --mode 選項(xiàng)參數(shù)為命令行覆寫默認(rèn)的模式。

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

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

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

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

當(dāng)你運(yùn)行 vue-cli-service build 命令時(shí)，無(wú)論你要部署到哪個(gè)環(huán)境，應(yīng)該始終把 NODE_ENV 設(shè)置為 "production" 來(lái)獲取可用于部署的應(yīng)用程序。

示例配置

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

#.env.development
NODE_ENV=development
VUE_APP_AXIOS_BASEURL=http://xxxx
#.env.preview 測(cè)試環(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"
  }
}

啟動(dòng)方式

npm run serve # 默認(rèn) dev
npm run build # 測(cè)試環(huán)境
npm run build:release # 正式環(huán)境

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

最新評(píng)論