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)