Vue-Cli如何在index.html中進(jìn)行環(huán)境判斷
Vue-Cli在index.html進(jìn)行環(huán)境判斷
主要是使用<% %> 語法進(jìn)行判斷
<link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" /> <!-- 開發(fā)環(huán)境 --> <% if(process.env.NODE_ENV === 'development'){ %> ? <script src="http://unpkg.com/vue@3"></script> <% } else if(process.env.NODE_ENV === 'production'){ %> ? <script src="http://unpkg.com/element-plus"></script> <% } else { %> ? <script src="http://cdn.jsdelivr.net/npm/element-plus"></script> <% } %> <title>這是測試</title>
# start 這是正常的if判斷 <% if(process.env.NODE_ENV === 'development'){ %> <% } %> # end 這是正常的if判斷 # start 標(biāo)準(zhǔn)的if else <% if(process.env.NODE_ENV === 'development'){ %> <% } else { %> <% } %> # end 標(biāo)準(zhǔn)的if else # start 標(biāo)準(zhǔn)的 if else if <% if(process.env.NODE_ENV === 'development'){ %> <% } else if(process.env.NODE_ENV === 'production'){ %> <% } %> # end 標(biāo)準(zhǔn)的 if else if
Vue-Cli3模式的判斷與環(huán)境變量配置
模式
模式的分類
development
模式用于 vue-cli-service servetest
模式用于 vue-cli-service test:unitproduction
模式用于 vue-cli-service build 和 vue-cli-service test:e2e
可以通過傳遞 --mode 選項(xiàng)參數(shù)為命令行覆寫默認(rèn)的模式。例如,在build命令中使用development 模式:
package.json ? "scripts": { ? ? "serve": "vue-cli-service serve", ? ? "build": "vue-cli-service build --mode development", ? ? "lint": "vue-cli-service lint" ? },
模式的匹配
討論模式的匹配前需要對以下幾個(gè)概念有所了解
1.npm命令(如npm run serve)到底做了什么
可以把 npm run serve 當(dāng)做是 npm run package.json 里面的scripts的value,實(shí)際上執(zhí)行的是vue-cli-service serve;其他的npm命令實(shí)際執(zhí)行的命令也是如此
如果將“server”鍵改為“dev”
"dev": "vue-cli-service serve"
控制臺輸入的命令就要輸入npm run dev,實(shí)際上執(zhí)行的也是vue-cli-service serve
2.模式與NODE_ENV 變量的關(guān)系
當(dāng)運(yùn)行 vue-cli-service 命令時(shí),所有的環(huán)境變量都從對應(yīng)的環(huán)境文件(.env文件)中載入
.env文件沒有配置NODE_ENV 變量
此時(shí)NODE_ENV 變量的值將取決于模式,例如,在 production 模式下被設(shè)置為 “production”,在 test 模式下被設(shè)置為 “test”,默認(rèn)則是 “development”
vue-cli-service serve默認(rèn)對應(yīng)development模式,執(zhí)行npm命令后NODE_ENV=“development”
如果改變了默認(rèn)的vue-cli-service serve
"serve": "vue-cli-service serve --mode production" 此時(shí)執(zhí)行npm run serve命令后模式為 production,相應(yīng)的NODE_ENV=“ production”
在.env文件中配置了NODE_ENV 變量
當(dāng)運(yùn)行 vue-cli-service 命令時(shí),所有的環(huán)境變量都從對應(yīng)的環(huán)境文件中載入
例如 運(yùn)行npm run serve 默認(rèn)模式是development,此時(shí)會加載.env.development文件,NODE_ENV 變量的值就是文件中定義的值
.env ? ? ? ? ? ? ? ?# 在所有的環(huán)境中被載入 .env.local ? ? ? ? ?# 在所有的環(huán)境中被載入,但會被 git 忽略 .env.[mode] ? ? ? ? # 只在指定的模式中被載入 .env.[mode].local ? # 只在指定的模式中被載入,但會被 git 忽略
為什么是這個(gè)模式
默認(rèn)情況下執(zhí)行vue-cli-service serve后模式就變?yōu)閐evelopment;執(zhí)行vue-cli-service test后模式就變?yōu)閠est;執(zhí)行vue-cli-service build后模式就變?yōu)閜roduction
通過傳遞 --mode 選項(xiàng)參數(shù)為命令行覆寫默認(rèn)的模式。
"build": "vue-cli-service build --mode development" //將build默認(rèn)的production模式轉(zhuǎn)變?yōu)閐evelopment
環(huán)境變量配置
現(xiàn)在的模式如果為x,則在.env.x中編輯需要的環(huán)境變量
只有以 VUE_APP_ 開頭的變量才可以在全局使用
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js做select下拉列表的實(shí)例(ul-li標(biāo)簽仿select標(biāo)簽)
下面小編就為大家分享一篇Vue.js做select下拉列表的實(shí)例(ul-li標(biāo)簽仿select標(biāo)簽),具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03Vue封裝Swiper實(shí)現(xiàn)圖片輪播效果
圖片輪播是前端中經(jīng)常需要實(shí)現(xiàn)的一個(gè)功能。最近學(xué)習(xí)Vue.js,就針對Swiper進(jìn)行封裝,實(shí)現(xiàn)一個(gè)簡單的圖片輪播組件。感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-02-02