欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

最新評(píng)論