Vue-Cli怎么在index.html中進行環(huán)境判斷

這篇文章主要介紹“Vue-Cli怎么在index.html中進行環(huán)境判斷”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue-Cli怎么在index.html中進行環(huán)境判斷”文章能幫助大家解決問題。

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="//unpkg.com/vue@3"></script>
<% } else if(process.env.NODE_ENV === 'production'){ %>
  <script src="//unpkg.com/element-plus"></script>
<% } else { %>
  <script src="//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 變量的關(guān)系

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

.env文件沒有配置NODE_ENV 變量

此時NODE_ENV 變量的值將取決于模式，例如，在 production 模式下被設(shè)置為 “production”，在 test 模式下被設(shè)置為 “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_ 開頭的變量才可以在全局使用

關(guān)于“Vue-Cli怎么在index.html中進行環(huán)境判斷”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。