vue項(xiàng)目中運(yùn)用webpack動(dòng)態(tài)配置打包多種環(huán)境域名的方法
在如今前后端分離，各種框架盛行的前端界，對(duì)項(xiàng)目的打包要求也越來(lái)越復(fù)雜，本人分享一個(gè)vue項(xiàng)目里，根據(jù)命令行輸入不同的命令，打包出不同環(huán)境域名的方法。（歡迎糾錯(cuò)，謝謝。）
1. 安裝插件 cross-env，npm install cross-env --save -dev，用于配置命令行輸入命令。
2. 修改package.json里的script命令：
配置了test（測(cè)試），ready（預(yù)發(fā)布），prod（正式）三種環(huán)境，npm run build 默認(rèn)設(shè)置成 npm run build:prod，也可以根據(jù)自己需求，配置更多的命令，參數(shù)自定。網(wǎng)上看到有人去修改NODE_ENV這個(gè)默認(rèn)的參數(shù)，配置文件里有很多地方都引用了這個(gè)參數(shù)。本人認(rèn)為這個(gè)默認(rèn)參數(shù)可以不改，自己重新增加一個(gè)參數(shù)就行（這里增加一個(gè)BUILD_ENV參數(shù)）。
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"build": "npm run build:prod",
"build:test": "cross-env NODE_ENV=production BUILD_ENV=test node build/build.js",
"build:ready": "cross-env NODE_ENV=production BUILD_ENV=ready node build/build.js",
"build:prod": "cross-env NODE_ENV=production BUILD_ENV=prod node build/build.js"
},
3. 修改config目錄下的prod.env.js
里面的默認(rèn)配置是這樣：只有一個(gè)NODE_ENV
'use strict'
module.exports = {
NODE_ENV: '"production"',
}
修改后的配置：
'use strict'
const BUILD_ENV = process.env.BUILD_ENV
let baseUrl
switch (BUILD_ENV) {
case 'test':
baseUrl = 'api.test.com'
break;
case 'ready':
baseUrl = 'api.ready.com'
break;
case 'prod':
baseUrl = 'api.prod.com'
break;
}
module.exports = {
NODE_ENV: '"production"',
BUILD_ENV: '"' + BUILD_ENV + '"',
baseUrl: '"' + baseUrl + '"',
}
修改的配置增加了BUILD_ENV和baseUrl兩個(gè)屬性， 屬性值記得拼接雙引號(hào) ，process.env.BUILD_ENV就是命令行里輸入的BUILD_ENV的值，再根據(jù)BUILD_ENV進(jìn)行相應(yīng)的判斷。在項(xiàng)目里，就可以通過(guò)process.env拿到prod.env.js暴露出去的3個(gè)屬性。比如接口文件，就需要process.env.baseUrl來(lái)動(dòng)態(tài)修改不同環(huán)境域名。
總結(jié)
以上所述是小編給大家介紹的vue項(xiàng)目中運(yùn)用webpack動(dòng)態(tài)配置打包多種環(huán)境域名的方法,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
vue-element-admin?登陸及目錄權(quán)限控制的實(shí)現(xiàn)
本文主要介紹了vue-element-admin?登陸及目錄權(quán)限控制的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue3.0中的雙向數(shù)據(jù)綁定方法及優(yōu)缺點(diǎn)
這篇文章主要介紹了vue3.0中的雙向數(shù)據(jù)綁定方法 ，文中通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
super-vuex是一套用于簡(jiǎn)化Vuex的數(shù)據(jù)架構(gòu)。這篇文章主要介紹了淺談super-vuex使用體驗(yàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
在使用vuex的時(shí)候出現(xiàn)commit未定義錯(cuò)誤的解決
這篇文章主要介紹了在使用vuex的時(shí)候出現(xiàn)commit未定義錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue利用mockjs編寫(xiě)假數(shù)據(jù)并應(yīng)用的問(wèn)題記錄
這篇文章主要介紹了Vue利用mockjs編寫(xiě)假數(shù)據(jù)并應(yīng)用,本文通過(guò)實(shí)例代碼給大家詳細(xì)講解，對(duì)Vue?mockjs數(shù)據(jù)相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2022-12-12
el-input無(wú)法輸入的問(wèn)題和表單驗(yàn)證失敗問(wèn)題解決
在做項(xiàng)目的時(shí)候發(fā)現(xiàn)一個(gè)情況,輸入框無(wú)法輸入值并且表單校驗(yàn)失靈,所以下面這篇文章主要給大家介紹了關(guān)于el-input無(wú)法輸入的問(wèn)題和表單驗(yàn)證失敗問(wèn)題解決的相關(guān)資料,需要的朋友可以參考下2023-02-02
vue3中安裝并使用CSS預(yù)處理器Sass的方法詳解
Sass是一種CSS預(yù)處理器,它擴(kuò)展了CSS的功能,提供了更高級(jí)的語(yǔ)法和特性,例如變量、嵌套、混合、繼承和顏色功能等,這些特性可以幫助開(kāi)發(fā)者更高效地管理和維護(hù)樣式表,本文介紹vue3中安裝并使用CSS預(yù)處理器Sass的方法,感興趣的朋友一起看看吧2024-01-01
Vue中的v-model綁定修飾符的實(shí)現(xiàn)原理
v-model 是Vue.js中的一個(gè)重要指令,通過(guò)它我們可以輕松實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,本文介紹一些常用的 v-model 綁定修飾符,并解析它們的實(shí)現(xiàn)原理,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了vue中的自定義分頁(yè)插件組件的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
解決vue中對(duì)象屬性改變視圖不更新的問(wèn)題
下面小編就為大家分享一篇解決vue中對(duì)象屬性改變視圖不更新的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02