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

这一个问题困扰了我许久，怎么用vue搭建开发环境并且可以请求本地数据，因为webpack-dev-server在编译vue的时候会默认开启一个端口，本地的服务器肯定也会拥有一个端口，那么不同端口的请求又为跨域请求，此时又不能把端口改为相同，因为这样会造成端口冲突，当然不考虑跨域jsonp之类，虽然jsonp可以做，但是在开发中无疑增加了繁杂度，并且这样做的话上线又要改请求方式，十分麻烦，那么应该怎么做呢？

这时候就要用到webpack里面的开启代理的配置,即把请求的地址转发到指定的地址，并且允许跨域请求 如下：

开启webpack代理

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

 dev: {
    env: require('./dev.env'),
    port: 9999,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {// 这里用的是vue-cli脚手架,默认proxyTable:{} ,内容为空 只需要配置这个参数即可
      '/webapi': {//代表你以什么为开始请求数据 表示以webapi开头的请求就开启代理
        target: 'http://im.ivymei.com', //代表代理地址 即：如果 this.$http.get('/webapi').then() 此时会变成http://www.baidu.com/webapi
        changeOrigin: true,// 表示允许跨域   
        pathRewrite: {
          '^/webapi': '/webapi' //可要可不要
        }
      }
    },
    cssSourceMap: false,
}

至此就可以愉快的请求本地数据了 8080端口也能请求80端口的数据了 最终打包上线也不需要改任何代码,更多的webpack代理设置请查阅webpack官方文档