這篇文章主要介紹vue項(xiàng)目中如何運(yùn)用webpack動(dòng)態(tài)配置打包多種環(huán)境域名，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
在如今前后端分離，各種框架盛行的前端界，對項(xiàng)目的打包要求也越來越復(fù)雜，本人分享一個(gè)vue項(xiàng)目里，根據(jù)命令行輸入不同的命令，打包出不同環(huán)境域名的方法。
1. 安裝插件 cross-env，npm install cross-env --save -dev，用于配置命令行輸入命令。
2. 修改package.json里的script命令：
配置了test（測試），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è)屬性， 屬性值記得拼接雙引號 ，process.env.BUILD_ENV就是命令行里輸入的BUILD_ENV的值，再根據(jù)BUILD_ENV進(jìn)行相應(yīng)的判斷。在項(xiàng)目里，就可以通過process.env拿到prod.env.js暴露出去的3個(gè)屬性。比如接口文件，就需要process.env.baseUrl來動(dòng)態(tài)修改不同環(huán)境域名。
以上是“vue項(xiàng)目中如何運(yùn)用webpack動(dòng)態(tài)配置打包多種環(huán)境域名”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
