Vue中.env、.env.development及.env.production文件說明
0.介紹
模式是Vue CLI項(xiàng)目中一個(gè)重要的概念,默認(rèn)情況下,一個(gè)Vue CLI項(xiàng)目有三種模式:
- developemt 模式用于vue-cli-service serve
- test 模式用于vue-cli-service test:unit
- production 模式用于vue-cli-service build 和vue-cli-service test:e2e
當(dāng)運(yùn)行vue-cli-service命令時(shí),所有的環(huán)境變量都從對(duì)應(yīng)的環(huán)境文件中載入。如果文件內(nèi)部不包含NODE_EVN變量,它的值取決于模式。例如,咋production模式下被設(shè)置為“production”,在test模式下被設(shè)置為“test”,默認(rèn)的模式則是“developemt”
NODE_EVN將決定你的應(yīng)用運(yùn)行的模式,是開發(fā),生產(chǎn)還是測(cè)試,因此也決定了創(chuàng)建哪種webpack配置
例如通過將 NODE_ENV
設(shè)置為 "test"
,Vue CLI 會(huì)創(chuàng)建一個(gè)優(yōu)化過后的,并且旨在用于單元測(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í),無論你要部署到哪個(gè)環(huán)境,應(yīng)該始終把 NODE_ENV
設(shè)置為 "production"
來獲取可用于部署的應(yīng)用程序。
1.在Vue項(xiàng)目中,通常配置文件有:
- env 全局默認(rèn)配置文件,無論什么環(huán)境都會(huì)加載合并
- .env.development 開發(fā)環(huán)境下的配置文件
- .env.production 生產(chǎn)環(huán)境下的配置文件
2.命名規(guī)則
注意:屬性名必須以VUE_APP開頭,比如VUEP_APP_XXX
3.關(guān)于文件的加載:
關(guān)于啟動(dòng)命令Vue會(huì)自動(dòng)加載對(duì)應(yīng)的環(huán)境,vue是根據(jù)文件名進(jìn)行加載的
比如當(dāng)你執(zhí)行npm run serve命令,會(huì)自動(dòng)加載.env.development文件
npm run serve ----NODE_EVN=development
注意:.env文件無論是來發(fā)還是生產(chǎn)都會(huì)加載
如上圖,如果我們運(yùn)行npm run serbe就會(huì)先加載.env文件,之后加載.env.development文件,兩個(gè)文件有同一項(xiàng),則后加載的文件就會(huì)覆蓋掉第一個(gè)文件,即.env.development文件覆蓋掉了.env文件的NOOE_ENV選項(xiàng)
同理,如果執(zhí)行了npm run build,則就是執(zhí)行了.evn和.env.production文件
npm run build ---NODE_EVN = production
4.關(guān)于使用
直接調(diào)用process.evn屬性(全局屬性,任何地方都可以使用)
例如:直接打印process.evn屬性:
4.1 在.vue文件中使用
4.2 在.js文件中
注意:js文件中可以添加JSON.stringfy(xxx),解析成字符,但是vue中不能
5.自定義環(huán)境
第一步:創(chuàng)建.evn.test文件
第二部:配置環(huán)境及地址
# 測(cè)試環(huán)境 NODE_ENV=production VUE_APP_ENV=test #請(qǐng)求接口基準(zhǔn)地址 VUE_APP_BASE_API=地址一 #業(yè)務(wù)系統(tǒng)地址 VUE_APP_protalUrl=地址二 #市門戶地址 VUE_APP_menhuUrl=地址三 #騰訊統(tǒng)計(jì)分析id VUE_APP_sid=騰訊ID
第三步:配置package.json
"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "test": "vue-cli-service build --mode test" },
配置完成,使用命令npm run test 即可以打包test環(huán)境的包。
最后,附上一張總結(jié)圖
總結(jié)
到此這篇關(guān)于Vue中.env、.env.development及.env.production文件說明的文章就介紹到這了,更多相關(guān)Vue .env、.env.development及.env.production內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Element UI框架中巧用樹選擇器的實(shí)現(xiàn)
這篇文章主要介紹了Element UI框架中巧用樹選擇器的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12vue實(shí)現(xiàn)簡(jiǎn)單滑塊驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單滑塊驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08Vue計(jì)算屬性與監(jiān)視(偵聽)屬性的使用深度學(xué)習(xí)
這篇文章主要介紹了Vue計(jì)算屬性與監(jiān)視(偵聽)屬性的使用,計(jì)算屬性指的是通過一系列運(yùn)算之后,最終得到一個(gè)值,watch監(jiān)視(偵聽)器允許開發(fā)者監(jiān)視數(shù)據(jù)的變化,從而針對(duì)數(shù)據(jù)的變化做特定的操作,本文就這兩種屬性給大家詳細(xì)講解,感興趣的朋友一起學(xué)習(xí)吧2022-11-11