在如今前后端分離，各種框架盛行的前端界，對(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_ENVlet 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ì)錯(cuò)新站長(zhǎng)站網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！