我由于做离线地图,下载了很多图片放在public文件夹下,导致报错too many files open。我想用反向代理,如何在vue里面配置反向代理
在Vue中配置反向代理可以通过在vue.config.js文件中进行配置。具体步骤如下:
在项目根目录下创建vue.config.js文件。如果已存在该文件,则直接打开。
在vue.config.js中添加如下代码:
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000', // 代理接口地址
changeOrigin: true,
pathRewrite: {
'^/api': '' // 将 /api 替换掉
}
}
}
}
}
这里的/api是需要进行反向代理的接口地址,target是实际请求的地址。changeOrigin为true表示开启跨域访问。pathRewrite是可选项,用于对请求路径进行修改。
保存vue.config.js文件并重启开发服务器
npm run serve
然后就可以通过访问/api来实现反向代理了。
例如,原本的接口地址为http://localhost:3000/xxx%EF%BC%8C%E7%8E%B0%E5%9C%A8%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%E8%AE%BF%E9%97%AEhttp://localhost:8080/api/xxx%E6%9D%A5%E5%AE%9E%E7%8E%B0%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86%E3%80%82