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的服务端渲染框架NUXT
这篇文章主要介绍了Nuxt之vue服务端渲染，NUXT集成了利用Vue开发服务端渲染的应用所需要的各种配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
design vue 表格开启列排序的操作
这篇文章主要介绍了design vue 表格开启列排序的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
vue3中h函数的常用使用方式汇总
其实h()函数和createVNode()函数都是创建dom节点,他们的作用是一样的,下面这篇文章主要给大家介绍了关于vue3中h函数的常用使用方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
vue使用 better-scroll的参数和方法详解
这篇文章主要介绍了vue使用 better-scroll的参数和方法详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
Vue使用高德地图选点定位搜索定位功能实现
这篇文章主要介绍了Vue使用高德地图选点定位搜索定位功能,文中给大家提到了常见问题解决方法，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-10-10
vue elementui 实现搜索栏子组件封装的示例代码
这篇文章主要介绍了vue elementui 搜索栏子组件封装,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
Vue实现路由跳转和嵌套
本篇文章主要介绍了Vue实现路由跳转和嵌套，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue前端优雅展示后端十万条数据面试点剖析
这篇文章主要为大家介绍了vue前端优雅展示后端十万条数据的考点剖析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
Vue源码探究之状态初始化
这篇文章主要介绍了Vue源码探究之状态初始化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
rem实现响应式布局的思路详解
这篇文章主要为大家介绍了rem实现响应式布局的思路详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03