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>這是測(cè)試</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 serve
• test 模式用于 vue-cli-service test:unit
• production 模式用于 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"
? },

模式的匹配

討論模式的匹配前需要對(duì)以下幾個(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"

控制臺(tái)輸入的命令就要輸入npm run dev，實(shí)際上執(zhí)行的也是vue-cli-service serve

2.模式與NODE_ENV 變量的關(guān)系

當(dāng)運(yùn)行 vue-cli-service 命令時(shí)，所有的環(huán)境變量都從對(duì)應(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)對(duì)應(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)境變量都從對(duì)應(yīng)的環(huán)境文件中載入

例如 運(yùn)行npm run serve 默認(rèn)模式是development，此時(shí)會(huì)加載.env.development文件，NODE_ENV 變量的值就是文件中定義的值

.env ? ? ? ? ? ? ? ?# 在所有的環(huán)境中被載入
.env.local ? ? ? ? ?# 在所有的環(huán)境中被載入，但會(huì)被 git 忽略
.env.[mode] ? ? ? ? # 只在指定的模式中被載入
.env.[mode].local ? # 只在指定的模式中被載入，但會(huì)被 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è)參考，也希望大家多多支持腳本之家。

最新評(píng)論