1)为何要使用proxyTable

  在VUE的这种项目里，一般前端用webpack进行开发与打包；

后端使用express ,koa等框架。

不管前端的代码是否与后端代码，物理上是否是同一个工程，不能逃避的是，前端在开发的时候，要调用后端的接口。

但开发与生产调用的后端地址不同： 开发时，是分别启动的服务与端口；生产状态时，前端的代码已经打包放在服务端的工程里一起发布，作为同一个工程的前端代码了。 

所以 ，在开发状态下，前端代码调用后端的代码，一是存在调用地址的一不致；二是在调用服务端的ajax时，会有跨域的问题需要解决；

当然，在生产状态下，就没有什么问题了，一堆打好包的js,css,html放在服务端工程启动的服务里而已！

2）如何使用proxyTable

还是拿之前使用过的vue-cli举例。我们首先要在项目目录中找到根目录下config文件夹下的index.js文件。由于我们是在开发环境下使用，自然而然是要配置在dev里面：

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api': {
      target: 'http://www.abc.com',  //目标接口域名
      changeOrigin: true,  //是否跨域
      pathRewrite: {
        '^/api': '/api'   //重写接口
      }
    },
  cssSourceMap: false
}

上面这段代码的效果就是将本地8080端口的一个请求代理到了http://www.abc.com这一域名下；

3）实战

  拿mydoor,mydoor-dev ,mydoor-manage-dev来说明。

mydoor :koa工程，后端代码；

mydoor-manage-dev：后台管理的前端代码，所以调用后端代码的路由，都以 /manage/*开头；其它/  /login等，属于自身的路由调用；/manage/*用于ajax向后端调用。 

webpack.dev.conf-》config/index.js里的 proxytable.

module.exports = {

dev: {

// Paths

assetsSubDirectory: 'staticM',

assetsPublicPath: '/',

proxyTable: {

"/manage": {

target: "http://localhost:3000",

changeOrigin:true,

pathRewrite:{

'^/manage': '/manage'

}},

},我们只需要做一个代理，就可以完成了跨域及服务端代码的调用 ！（通过axois);

其它的都是前端本身的route. 我们不要做代理！