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)