vue搭建开发环境并且可以请求本地数据设置

这一个问题困扰了我许久，怎么用vue搭建开发环境并且可以请求本地数据，因为webpack-dev-server在编译vue的时候会默认开启一个端口，本地的服务器肯定也会拥有一个端口，那么不同端口的请求又为跨域请求，此时又不能把端口改为相同，因为这样会造成端口冲突，当然肯定不考虑跨域jsonp之类，因为这样做的话上线又要改请求方式，十分麻烦，那么应该怎么做呢？ 后来无意间看到vue配置里面有一个开启代理的配置 即把请求的地址转发到指定的地址，并且允许跨域请求 如下：

此时找到config文件中的index.js ，拉到底部 找到 dev：{ 里面是一些端口的配置} 在里面添加上如下配置

 dev: {
    env: require('./dev.env'),
    port: 9999,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {  // 这里用的是vue-cli脚手架,默认proxyTable:{} ,内容为空 只需要配置这个参数即可
      '/webapi': {
        target: 'http://im.ivymei.com',
        changeOrigin: true,
        pathRewrite: {
          '^/webapi': '/webapi'
        }
      }
    },
    cssSourceMap: false,
}

'/webapi' 代表 你以什么为开始请求数据 // 此时我用的是axios
target 代表代理地址 //即 如果 this.$http.get('/webapi').then() 此时会变成http://www.baidu.com/webapi
changeOrigin: true, // 表示允许跨域 pathRewrite: { '^/webapi': '/webapi' // 配置 可要可不要 }
至此就可以愉快的请求本地数据了 8080端口也能请求80端口的数据了 最终打包上线也不需要改任何代码。