vue-cli3添加模式配置多環(huán)境變量的方法
vue-cli3配置多環(huán)境變量
先掛官網(wǎng)描述：環(huán)境變量和模式
需求
根據(jù)運(yùn)行環(huán)境判斷執(zhí)行代碼：
- 預(yù)發(fā)環(huán)境操作完成跳轉(zhuǎn)地址與線上環(huán)境跳轉(zhuǎn)地址不同
- 線上環(huán)境添加埋點(diǎn)腳本
實(shí)現(xiàn)
Step1：在項(xiàng)目根目錄中新建.env.uat
.env.uat配置如下：
VUE_APP_BUILD_TYPE=uat
vue-cli中規(guī)定，只有以 VUE_APP_ 開頭的變量會(huì)被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中。
代碼中可以通過 process.env.VUE_APP_SECRET 這樣訪問。
NODE_ENV 和 BASE_URL 是兩個(gè)特殊變量，在代碼中始終可用
Step2：修改 package.json
傳遞 --mode 選項(xiàng)參數(shù)為命令行覆寫默認(rèn)的模式。
"scripts": {
"build": "vue-cli-service build",
"build:uat": "vue-cli-service build --mode uat"
}
Step3：使用
// 是否預(yù)發(fā)部署 const IS_UAT = process.env.VUE_APP_BUILD_TYPE === 'uat' const _url = IS_UAT ? 'http://a.123.com' : 'http://b.123.com' // 是否添加埋點(diǎn) const IS_ADD_JAQ = process.env.NODE_ENV === 'production' && !IS_UAT if (IS_ADD_JAQ && loginUser) addJaq(loginUser) ...
優(yōu)化
到這，功能已經(jīng)實(shí)現(xiàn)了。
美滋滋地打個(gè)包，媽呀，體積也太大了：
此處解決辦法為強(qiáng)寫 NODE_ENV ，最終.env.uat配置如下：
NODE_ENV=production VUE_APP_BUILD_TYPE=uat
這樣子順眼些了，但整個(gè)項(xiàng)目打包這部分還是有很大的優(yōu)化空間，下期再干咯～
總結(jié)
以上所述是小編給大家介紹的vue-cli3添加模式配置多環(huán)境變量的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了vue2中使用AntV?以g2plot為實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue3如何清空Reactive定義的數(shù)組問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue實(shí)現(xiàn)實(shí)時(shí)更新sessionStorage數(shù)據(jù)的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何實(shí)現(xiàn)實(shí)時(shí)更新sessionStorage數(shù)據(jù)，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，需要的可以參考一下2023-06-06
Vue實(shí)現(xiàn)動(dòng)態(tài)響應(yīng)數(shù)據(jù)變化
本篇文章主要介紹了Vue 動(dòng)態(tài)響應(yīng)數(shù)據(jù)變化，通過綁定數(shù)據(jù)即可以實(shí)時(shí)改變視圖顯示，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-04-04
vue-cli中devServer.proxy相關(guān)配置項(xiàng)的使用
這篇文章主要介紹了vue-cli中devServer.proxy相關(guān)配置項(xiàng)的使用詳解，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue引入highCharts實(shí)現(xiàn)數(shù)據(jù)可視化
這篇文章主要為大家詳細(xì)介紹了Vue引入highCharts實(shí)現(xiàn)數(shù)據(jù)可視化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue3中watch如何停止監(jiān)視,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
這篇文章主要介紹了vue組件中修改組件外元素樣式,本文給大家分享兩種解決方案幫助大家解決這樣的問題，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
解決vue里a標(biāo)簽值解析變量,跳轉(zhuǎn)頁面,前面加默認(rèn)域名端口的問題
這篇文章主要介紹了解決vue里a標(biāo)簽值解析變量,跳轉(zhuǎn)頁面,前面加默認(rèn)域名端口的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue項(xiàng)目中?jsconfig.json概念及使用步驟
這篇文章主要介紹了vue項(xiàng)目中?jsconfig.json是什么,本文僅僅簡單介紹了?jsconfig?.json?的一些基本配置，而?jsconfig?.json提供了大量能使我們快速便捷提高代碼效率的方法，需要的朋友可以參考下2022-07-07