開發環境:
前端: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))})
——————完———————