express：webpack dev-server開發中如何調用後端服務器的接口？

開發環境：

    前端：webpack + vue + vue-resource，基於以下模板建立的開發環境：  https://github.com/vuejs-templates/webpack 

    後端：java, tomcat

問題：

    前端開發人員在使用webpack + vue的開發環境調試時，發如今全部須要調用後端接口的地方就很麻煩，目前處理以下：

    1. 將每一個接口的返回值放在一個json文件中，這些json文件統一放到static目錄下

    2. 開發的時候， 而後全部須要調用後端接口的地方，就先把路徑指向static下對應的json文件名，獲取數據；

    3. 發佈的時候，將全部接口的路徑改成正常的路徑。

    這樣每次發佈都很麻煩，並且很容易出錯。

分析：

    經過分析webpack的build/dev-server.js文件，發現這個是使用express來實現的一個簡單的web服務器，那麼就考慮是否能夠參考本身寫一個express的中間件，將全部對於後端接口的調用都轉爲調用真正的後端接口，這樣在發佈的時候就不須要修改路徑了。

解決方法：

      經過分析 build/dev-server.js 源碼，發現裏面有用到 http-proxy-middleware（ https://npm.taobao.org/package/http-proxy-middleware）  ，而且在代碼中有註釋：Define HTTP proxies to your custom API backend  ，這不就是我想要的嗎？

    

    而後看後面的代碼中去讀取config/index.js內的dev.proxyTable來對http-proxy-middleware作初始化，因此我就在config/index.js的proxyTable中添加了以下內容：

    proxyTable: {       

        '/appserver/SinglePowerStation': 'http://192.168.1.82:8899',

        '/appserver/powerStationManage': 'http://192.168.1.82:8899',

    },

    

   這裏有幾點要說明：

    0）我要實現的目的是把全部以  SinglePowerStation、 powerStationManage 開頭的接口調用都轉到後端服務器上；

    1）個人後端服務器地址是 http://192.168.1.82:8899

    2）後端接口前綴只有 SinglePowerStation、 powerStationManage 兩種；

    

    至於proxyTable的格式是經過分析build/dev-server.js內的以下代碼總結出來的：

Object.keys(proxyTable).forEach(function (context) {

  var options = proxyTable[context]

  if (typeof options === 'string') {

    options = { target: options }

  }  

  app.use(proxyMiddleware(context, options))

})

——————完———————

來自爲知筆記(Wiz)