配置webpack中dev.env.js、prod.env.js，解決不同命令下項目啟動和打包到指定的環境

前后端分離的項目開發中，我們有開發環境、測試環境、預生產環境和生產環境。

1、開發環境下調試接口的時候，一般都會有好幾個接口地址（開發服務器上的，本地的，接口開發人員的，七七八八的接口地址），要根據情況手動來切換接口地址。

2、打包時要部署項目到不同的環境，而這也需要每次都根據情況切換接口地址。

雖說手動來切換地址是可以滿足需求的，但是這種方式實屬不是一種較為優雅的處理方式。那么，我們換一種優雅一點的方式來解決。

通過修改配置文件，讓啟動和打包項目時根據不同的命令，達到預期的結果。

下面就以Vue項目為例，介紹一下上述的解決辦法，如果您有更好的方式，煩請聯系我，大家相互交流學習。

1、啟動項目時，需要修改/package.json、/config/dev.env.js和/src/main.js文件
　1). 在/package.json中，為啟動命令設置不同的參數

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev_test": "webpack-dev-server --inline --progress --env=test --config build/webpack.dev.conf.js",
    "dev_prod": "webpack-dev-server --inline --progress --env=prod --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"
}

　2). 在/config/dev.env.js中，通過process.argv獲取一個命令數組，並為其配置相應的接口地址

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

let params = process.argv[4]
let baseUrl = ''
switch (params) {
    case '--env=test':
      baseUrl = '"http://a.com"'
      break
    case '--env=prod':
      baseUrl = '"http://b.com"'
      break
    default:
      baseUrl = '"http://c.com"'
}
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  
　baseUrl: baseUrl
})

　3). 在/src/main.js中，通過process.env.baseUrl 獲取/config/dev.env.js文件的baseUrl並將其掛載在Vue的原型上

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

Vue.prototype.$baseUrl = process.env.baseUrl

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在不同接口地址下啟動項目的時候，直接用對應的命令npm run dev、npm run dev_test、npm run dev_prod就可以了，再也不用去文件中修改接口地址了。

2、打包項目時，需要修改/config/prod.env.js和/src/main.js文件
　1). 在/config/prod.env.js中，通過process.argv獲取一個命令數組，並為其配置相應的接口地址

'use strict'
let params = process.argv[2]
let baseUrl = ''
switch (params) {
    case 'test':
      baseUrl = '"http://a.com"'
      break
    case 'prod':
      baseUrl = '"http://b.com"'
      break
    default:
      baseUrl = '"http://c.com"'
}
module.exports = merge(prodEnv, {
  NODE_ENV: '"production"',
  
　baseUrl: baseUrl
})

　2). 在/src/main.js中，通過process.env.baseUrl 獲取/config/prod.env.js文件的baseUrl並將其掛載在Vue的原型上

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

Vue.prototype.$baseUrl = process.env.baseUrl

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在打包不同環境下項目的時候，直接用對應的命令npm run build、npm run build test、npm run build prod就可以了，再也不用去文件中修改接口地址了。

這樣我們就可以一勞永逸了，在啟動和打包項目的時候一條命令直接搞定。