vue cli中env的使用指南
前言
相信使用過(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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue中計(jì)算屬性和監(jiān)聽屬性及數(shù)據(jù)的響應(yīng)式更新和依賴收集基本原理講解
computed是vue的配置選項(xiàng),它的值是一個(gè)對(duì)象,其中可定義多個(gè)計(jì)算屬性,每個(gè)計(jì)算屬性就是一個(gè)函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下2023-03-03Vue實(shí)現(xiàn)插槽下渲染dom字符串的使用
本文主要介紹了Vue實(shí)現(xiàn)插槽下渲染dom字符串的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04基于vue2.0+vuex的日期選擇組件功能實(shí)現(xiàn)
這篇文章主要介紹了 基于vue2.0+vuex的日期選擇組件功能實(shí)現(xiàn),詳細(xì)介紹了使用vue編寫的日期組件,,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2017-03-03Vue項(xiàng)目中Websocket的使用實(shí)例
WebSocket就誕生了,它最大特點(diǎn)就是服務(wù)器可以主動(dòng)向客戶端推送信息,客戶端也可以主動(dòng)向服務(wù)器發(fā)送信息,是真正的雙向平等對(duì)話,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中Websocket使用的相關(guān)資料,需要的朋友可以參考下2023-02-02Vue 中獲取當(dāng)前時(shí)間并實(shí)時(shí)刷新的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue 中獲取當(dāng)前時(shí)間并實(shí)時(shí)刷新,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05vue-router之nuxt動(dòng)態(tài)路由設(shè)置的兩種方法小結(jié)
今天小編就為大家分享一篇vue-router之nuxt動(dòng)態(tài)路由設(shè)置的兩種方法小結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue-cli3項(xiàng)目生產(chǎn)和測(cè)試環(huán)境分包后文件名和數(shù)量不一致解決
這篇文章主要為大家介紹了vue-cli3項(xiàng)目生產(chǎn)和測(cè)試環(huán)境分包后文件名和數(shù)量不一致解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05