# Vue-cli proxyTable 解决开发环境的跨域问题

参考链接：https://vuejs-templates.github.io/webpack/proxy.html

假如要请求api.xxxxxxxx.com/list/1地址，可以这样书写：

proxyTable: {
      // proxy all requests starting with /list to jsonplaceholder
  '/list': {
    target: 'http://api.xxxxxxxx.com',        //后端IP地址
    changeOrigin: true,        //设置跨域，一定要
    pathRewrite: {            //路径重写
      '^/list': '/list'        //以list开头的请求
    }
  }
}

changeOrigin参数，接收一个布尔值，如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了，当然这只适用于开发环境。

路径重写有两种情况: 

      '^/list': '/list'    

此时，在写url的时候，只用写成/list/1就可以代表api.xxxxxxxx.com/list/1.

      '^/list': ''    

开发环境推荐：
cheap-module-eval-source-map
生产环境推荐：
cheap-module-source-map

相关解释：

• 大部分情况我们调试并不关心列信息，而且就算 sourcemap 没有列，有些浏览器引擎（例如 v8） 也会给出列信息，所以我们使用 cheap 模式可以大幅提高 souremap 生成的效率。
• 使用 module 可支持 babel 这种预编译工具（在 webpack 里做为 loader 使用）。
• 使用 eval 方式可大幅提高持续构建效率，参考webapck devtool速度对比列表，这对经常需要边改边调的前端开发而言非常重要