vue專案中運用webpack動態配置打包多種環境域名

 　　在如今前後端分離，各種框架盛行的前端界，對專案的打包要求也越來越複雜，本人分享一個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來動態修改不同環境域名。