我們在開發項目的時候，往往會在同一個局域網進行開發，前後端分離同時進行開發。我們前端調用後端給的接口也是在局域網內部的。但是，當項目推到線上的時候，我們會從真實服務器上獲取接口，因此，我們可能在測試接口和真實接口之間頻繁切換，可以通過config來進行相關的配置。

第一步，分別設置不同的接口地址

首先，我們分別找到下面的文件：

/config/dev.env.js
/config/prod.env.js
其實，這兩個文件就是針對生產環境和發布環境設置不同參數的文件。我們打開dev.en.js文件。代碼如下：

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

module.exports = merge(prodEnv, {
  NODE_ENV: ‘"development"‘,
})
 

好，我們在NODE_ENV下面增加一項，代碼如下：

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

module.exports = merge(prodEnv, {
  NODE_ENV: ‘"development"‘,
  BASE_API: ‘"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"‘,
})

然後，我們編輯prod.env.js文件，代碼如下

‘use strict‘
module.exports = {
  NODE_ENV: ‘"production"‘,
  BASE_API: ‘"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"‘,
}
 

第二部，在代碼中調用設置好的參數

// 配置API接口地址
var root = process.env.BASE_API

完成了我們的配置工作。最後，重啟項目，就能使新配置的接口地址生效了。
在經過這樣的配置之後，我們在運行npm run dev的時候，跑的就是測試接口。而我們運行npm run build打包項目的時候，打包的是服務器正式接口，就不用調來調去了。

VUE 利用 webpack 給生產環境和發布環境配置不同的接口地址