?　　在如今前后端分離，各種框架盛行的前端界，對項目的打包要求也越來越復雜，本人分享一個vue項目里，根據命令行輸入不同的命令，打包出不同環境域名的方法。（歡迎糾錯，謝謝。）

1. 安裝插件?cross-env，npm?install?cross-env --save -dev，用于配置命令行輸入命令。

2.?修改package.json里的script命令：

　　配置了test（測試），ready（預發布），prod（正式）三種環境，npm run build?默認設置成 npm run build:prod，也可以根據自己需求，配置更多的命令，參數自定。網上看到有人去修改NODE_ENV這個默認的參數，配置文件里有很多地方都引用了這個參數。本人認為這個默認參數可以不改，自己重新增加一個參數就行（這里增加一個BUILD_ENV參數）。

"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

里面的默認配置是這樣：只有一個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兩個屬性，屬性值記得拼接雙引號，process.env.BUILD_ENV就是命令行里輸入的BUILD_ENV的值，再根據BUILD_ENV進行相應的判斷。在項目里，就可以通過process.env拿到prod.env.js暴露出去的3個屬性。比如接口文件，就需要process.env.baseUrl來動態修改不同環境域名。

　　

?

轉載于:https://www.cnblogs.com/c-ms/p/11073675.html

總結

以上是生活随笔為你收集整理的vue项目中运用webpack动态配置打包多种环境域名的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。