这一个问题困扰了我许久,怎么用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端口的数据了 最终打包上线也不需要改任何代码。