配置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就能夠了，不再用去文件中修改接口地址了。

這樣咱們就能夠一勞永逸了，在啓動和打包項目的時候一條命令直接搞定。