前言
相信使用過(guò) vueCli 開(kāi)發(fā)項(xiàng)目的小伙伴有點(diǎn)郁悶彼城，正常開(kāi)發(fā)時(shí)會(huì)有三個(gè)接口環(huán)境（開(kāi)發(fā)皮钠，測(cè)試晚岭，正式）迂烁，但是 vueCli 只提供了兩種 development,production(不包含 test-單測(cè))模式州袒。其實(shí)這是小伙伴們沒(méi)有理解 vueCli 文檔所導(dǎo)致的揭绑。
vueCli 命令中 --mode 對(duì)應(yīng)的 .env.[mode]，而不是 NODE_ENV
::: tip 注意
除了 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ù)為命令行覆寫(xiě)默認(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)行的模式，是開(kāi)發(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厨疙，目的是為了在開(kāi)發(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)境
