Vue-Cli在index.html進行環(huá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 標準的if else
<% if(process.env.NODE_ENV === 'development'){ %>
<% } else { %>
<% } %>
# end 標準的if else


# start 標準的 if else if
<% if(process.env.NODE_ENV === 'development'){ %>
<% } else if(process.env.NODE_ENV === 'production'){ %>
<% } %>
# end 標準的 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 選項參數(shù)為命令行覆寫默認的模式。例如，在build命令中使用development 模式：

package.json
? "scripts": {
? ? "serve": "vue-cli-service serve",
? ? "build": "vue-cli-service build --mode development",
? ? "lint": "vue-cli-service lint"
? },

模式的匹配

討論模式的匹配前需要對以下幾個概念有所了解

1.npm命令（如npm run serve）到底做了什么

可以把 npm run serve 當做是 npm run package.json 里面的scripts的value，實際上執(zhí)行的是vue-cli-service serve;其他的npm命令實際執(zhí)行的命令也是如此

如果將“server”鍵改為“dev”

"dev": "vue-cli-service serve"

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

2.模式與NODE_ENV 變量的關系

當運行 vue-cli-service 命令時，所有的環(huán)境變量都從對應的環(huán)境文件（.env文件）中載入

.env文件沒有配置NODE_ENV 變量

此時NODE_ENV 變量的值將取決于模式，例如，在 production 模式下被設置為 “production”，在 test 模式下被設置為 “test”，默認則是 “development”

vue-cli-service serve默認對應development模式，執(zhí)行npm命令后NODE_ENV=“development”

如果改變了默認的vue-cli-service serve

"serve": "vue-cli-service serve --mode production" 此時執(zhí)行npm run serve命令后模式為 production，相應的NODE_ENV=“ production”

在.env文件中配置了NODE_ENV 變量

當運行 vue-cli-service 命令時，所有的環(huán)境變量都從對應的環(huán)境文件中載入

例如 運行npm run serve 默認模式是development，此時會加載.env.development文件，NODE_ENV 變量的值就是文件中定義的值

.env ? ? ? ? ? ? ? ?# 在所有的環(huán)境中被載入
.env.local ? ? ? ? ?# 在所有的環(huán)境中被載入，但會被 git 忽略
.env.[mode] ? ? ? ? # 只在指定的模式中被載入
.env.[mode].local ? # 只在指定的模式中被載入，但會被 git 忽略

為什么是這個模式

默認情況下執(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 選項參數(shù)為命令行覆寫默認的模式。

"build": "vue-cli-service build --mode development" //將build默認的production模式轉(zhuǎn)變?yōu)閐evelopment

環(huán)境變量配置

現(xiàn)在的模式如果為x,則在.env.x中編輯需要的環(huán)境變量

只有以 VUE_APP_ 開頭的變量才可以在全局使用

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。