参考这个 https://www.jianshu.com/p/5ef2b17f9b25
1、介绍
这里的vue代理是 vue静态服务器做代理。使用的是 http-proxy-middleware 这个模块(这个模块相当于是node.js的一个插件)。
2、实际代码
我的 api=’/rng’
我的请求地址 ${api}/xxxx/xxx ,请求地址就为 ‘/rng/xxxx/xxx’
当node服务器 遇到 以 ‘/rng’ 开头的请求,就会把 target 字段加上,那么我的请求地址就为 http://45.105.124.130:8081/rng/xxxx/xxx
下面的 pathRewrite 表示的意思是 把/rng 替换为 空,那么我的请求地址就为 http://45.105.124.130:8081/xxxx/xxx(用在如果你的实际请求地址没有 rng 的情况)
再记一个示例
module.exports = {
devServer: {
open: true,//自动打开浏览器
host: 'localhost',//'0.0.0.0' ip地址
port: 8080,
https: false, //false关闭https,true为开启
//以上的ip和端口是我们本机的;下面为需要跨域的
// 讲解博客 https://www.jianshu.com/p/5ef2b17f9b25
proxy: { //配置跨域
'/shiro': {
target: 'http://localhost:9090/shiro/', //这里后台的地址模拟的;应该填写你们真实的后台接口
ws: true,
changOrigin: true, //允许跨域
pathRewrite: {
'^/shiro': '' //请求的时候使用这个api就可以
}
}
}
// 当在$axios 访问 /shiro/sys/login 时,先会把 target 字段加上 ,变为
// http://localhost:9090/shiro/shiro/sys/login,然后在 pathRewrite 里把 /shiro 换为 ''
// 变为 http://localhost:9090/shiro/sys/login
},
configureWebpack: {
performance: {
hints: 'warning',
//入口起点的最大体积
maxEntrypointSize: 50000000,
//生成文件的最大体积
maxAssetSize: 30000000,
//只给出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js');
}
}
},
publicPath: './',
}