vue-cli的index.html中使用環(huán)境變量方式
更新時(shí)間：2022年10月21日 10:02:56 作者：前端開(kāi)發(fā)終生學(xué)習(xí)者
這篇文章主要介紹了vue-cli的index.html中使用環(huán)境變量方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue-cli的index.html使用環(huán)境變量
項(xiàng)目中使用了公司定義的統(tǒng)一頭部文件，需要引入header.js和header.css。負(fù)責(zé)人希望各個(gè)環(huán)境引入各自的js和css。
當(dāng)時(shí)第一反應(yīng)是process，但是在index.html里打印報(bào)錯(cuò)，所以最初是根據(jù)域名去判斷，然后動(dòng)態(tài)修改src和href值。感覺(jué)很麻煩。
翻閱cli官方文檔后看到了這樣一段話。
遂使用了一下，發(fā)現(xiàn)是可以的，具體寫(xiě)法如下：
.env.xxx環(huán)境文件中定義變量：
VUE_APP_APIURL = "http://test.xxxx.com.cn"
然后html文件中使用
<link rel="stylesheet" href="<%= VUE_APP_APIURL %>/header/head.css" rel="external nofollow" >
vue-cli在index.html判斷環(huán)境變量加載不同代碼
適用開(kāi)發(fā)過(guò)程中在index.html頁(yè)面根據(jù)不同環(huán)境打包不同代碼的差異化場(chǎng)景，下面舉例在打包生產(chǎn)環(huán)境時(shí)的差異處理：
index.html
<!DOCTYPE html>
<html lang="en">
? ? <head>
? ? ? ? <meta charset="utf-8" />
? ? ? ? <meta http-equiv="X-UA-Compatible" content="IE=edge" />
? ? ? ? <meta name="viewport" content="width=device-width,initial-scale=1.0" />
? ? ? ? <meta name="keywords" content="" />
? ? ? ? <meta name="description" content="" />
? ? ? ? <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
? ? ? ? <title><%= htmlWebpackPlugin.options.title %></title>
? ? ? ? <% if (process.env.NODE_ENV === 'production' ) { %>
? ? ? ? <script>
? ? ? ? ? ? window.test = "xxxx";
? ? ? ? </script>
? ? ? ? <% } %>
? ? ? ??
? ? </head>
? ? <body>
? ? ? ? <noscript>
? ? ? ? ? ? <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
? ? ? ? </noscript>
? ? ? ? <div id="app"></div>
? ? ? ? <!-- built files will be auto injected -->
? ? </body>
</html>核心代碼
<% if (process.env.NODE_ENV === 'production' ) { %>
? ? //這里寫(xiě)需要的代碼
<% } %>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于Vue3過(guò)渡動(dòng)畫(huà)的踩坑記錄
在開(kāi)發(fā)中我們想要給一個(gè)組件的顯示和消失添加某種過(guò)渡動(dòng)畫(huà),可以很好的增加用戶體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于Vue3過(guò)渡動(dòng)畫(huà)踩坑的相關(guān)資料,需要的朋友可以參考下2021-12-12
這篇文章主要介紹了Vue中的同步調(diào)用和異步調(diào)用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹了vue-router 起步步驟詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
一文搞懂vue中provide和inject實(shí)現(xiàn)原理對(duì)抗平庸
這篇文章主要為大家介紹了vue中provide和inject實(shí)現(xiàn)原理的深入理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
vue-pdf打包后無(wú)法預(yù)覽問(wèn)題及修復(fù)方式
這篇文章主要介紹了vue-pdf打包后無(wú)法預(yù)覽問(wèn)題及修復(fù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了為大家函數(shù)式組件劫持替代json封裝element表格的過(guò)程思路及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue實(shí)現(xiàn)監(jiān)聽(tīng)某個(gè)元素滾動(dòng),親測(cè)有效
這篇文章主要介紹了Vue實(shí)現(xiàn)監(jiān)聽(tīng)某個(gè)元素滾動(dòng),親測(cè)有效！具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
使用Vue綁定class和style樣式的幾種寫(xiě)法總結(jié)
這篇文章主要介紹了使用Vue綁定class和style樣式的幾種寫(xiě)法，文章通過(guò)代碼示例介紹的非常詳細(xì)，具有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07
本文主要介紹了基于Vue3的全屏拖拽上傳組件，其實(shí)思路上與其他拖拽上傳組件基本一樣,都是指定一個(gè)區(qū)域可拖拽,然后讀取文件在上傳，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-09-09
這篇文章主要介紹了vue菜單欄自適應(yīng)折疊,我這里使用的是el-menu導(dǎo)航菜單，監(jiān)聽(tīng)頁(yè)面寬度的改變，來(lái)改變導(dǎo)航菜單的折疊和展開(kāi)，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-01-01