首页 > 代码库 > vue-cli代理开发
vue-cli代理开发
如何设置接口代理？
一、找到config文件下的index.js
二、找到dev里面的proxyTable他的值就是一个{}，这里为了方便配置配置文件单独写成一个文件
dev: {
env: require(‘./dev.env‘),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: ‘static‘,
assetsPublicPath: ‘/‘,
proxyTable: proxyConfig.proxyList,
cssSourceMap: false
}
三、配置proxyConfig文件
module.exports = {
proxyList: {
‘/consumerRecord/getAll‘:{
target: ‘http://10.10.10.10：8080‘,
pathRewrite: {
‘^/consumerRecord/getAll‘: ‘/consumerRecord/getAll‘
}
}
}
}
四、访问localhost:8080/consumerRecord/getAll就相当于访问下面地址
http://10.10.10.10：8080/consumerRecord/getAll
这样用代理就解决了开发中跨域的问题，当然可以直接proxyTable后面写（但是不建议） 比如：
proxyTable: {
‘/consumerRecord/getAll‘:{
target: ‘http://10.10.10.10：8080‘,
pathRewrite: {
‘^/consumerRecord/getAll‘: ‘/consumerRecord/getAll‘
}
}
}
五、代理其实是利用的就是 http-proxy-middleware 插件完成的；
扩展：
- vue-cli中用到的插件还有：
- 进行域名/接口代理，避免出现跨域的障碍。
- webpack-hot-middleware
- 监测文件变动，将打包的文件写入内存中。
- html-webpack-plugin
- 创建调用webpack bundles的html文件。在每次编译后，会为文件名加上hash值。
- webpack-hot-middleware
- 增量的修改浏览器，实现无刷新更新
vue-cli代理开发
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。