如何设置接口代理?
一、找到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
- 增量的修改浏览器,实现无刷新更新