vue代理如何配置重写方法(pathRewrite与rewrite)
更新时间：2024年03月22日 14:52:45 作者：裤头青蛙
这篇文章主要介绍了vue代理如何配置重写方法(pathRewrite与rewrite),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue代理配置重写方法
在开发中，遇到一个需求，因为后台服务是我自己这边启动的。
所以后台服务地址和Tomcat启动的网页地址是一样的，导致我们vue代理的时候，直接跳转到我们Tomcat启动的旧页面当中，写入/api便不会跳到tomcat页面，但如此便会导致与接口地址不符
所以需要用路由重写方法来重写。
如下图
rewirte来重写我们请求接口的路由，请求时自动会把/api给去除掉。
Vue3重写写法(Vite环境下)在Vite.config.js中配置
Vue3(Vue.config.js)
devServer: {
proxy: {
//代理匹配前缀2
'/api2': {
target: 'http://localhost:5001',
pathRewrite: {'^/api2': ''},
ws: true,
changeOrigin: true
},
//代理匹配前缀1
'/api': {
target: 'http://localhost:5000',
pathRewrite: {'^/api': ''},
ws: true,)
changeOrigin: true
}
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
关于vue项目中会出现一些需求,就是右键菜单项的功能实现,下面这篇文章主要给大家介绍了关于vue封装一个右键菜单组件(复制粘贴即可使用)的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要给大家介绍了关于vue3中使用codemirror的详细教程,CodeMirror是一款功能强大的代码高亮插件,他不仅提供了高亮功能,其丰富的方法属性也封装了缩进、自动换行、获取编辑文本、设置编辑文本、回退功能等多种实用效果,需要的朋友可以参考下2023-09-09
这篇文章主要为大家详细介绍了如何基于Vue3自定义实现简单的图片翻转预览功能,文中的示例代码讲解详细,具有一定的学习价值,有需要的小伙伴可以参考一下2023-10-10
这篇文章主要介绍了如何封装了一个vue移动端下拉加载下一页数据的组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
详解vuex结合localstorage动态监听storage的变化
这篇文章主要介绍了详解vuex结合localstorage动态监听storage的变化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了如何使用ant-design-vue的Table组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
vue在同一个组件内,方法之间经常需要互相调用,下面这篇文章主要给大家介绍了关于vue2中组件互相调用实例methods中的方法实现的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
Avue是一个基于Vue.js的前端框架,它是由阿里云开发的一款企业级UI组件库,旨在提供一套全面、易用且高性能的界面解决方案本文介绍了Avue实现动态查询与数据展示的示例,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了浅谈Vue static 静态资源路径 和 style问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最近正在使用Pinia进行状态管理,我希望在重新刷新页面时保持状态,下面这篇文章主要给大家介绍了关于Pinia简单使用以及数据持久化的相关资料,需要的朋友可以参考下2022-05-05
最新评论