vue代理如何配置重寫(xiě)方法(pathRewrite與rewrite)
vue代理配置重寫(xiě)方法
在開(kāi)發(fā)中，遇到一個(gè)需求，因?yàn)楹笈_(tái)服務(wù)是我自己這邊啟動(dòng)的。
所以后臺(tái)服務(wù)地址和Tomcat啟動(dòng)的網(wǎng)頁(yè)地址是一樣的，導(dǎo)致我們vue代理的時(shí)候，直接跳轉(zhuǎn)到我們Tomcat啟動(dòng)的舊頁(yè)面當(dāng)中，寫(xiě)入/api便不會(huì)跳到tomcat頁(yè)面，但如此便會(huì)導(dǎo)致與接口地址不符
所以需要用路由重寫(xiě)方法來(lái)重寫(xiě)。
如下圖
rewirte來(lái)重寫(xiě)我們請(qǐng)求接口的路由，請(qǐng)求時(shí)自動(dòng)會(huì)把/api給去除掉。
Vue3重寫(xiě)寫(xiě)法(Vite環(huán)境下)在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
}
}
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue封裝一個(gè)右鍵菜單組件詳解(復(fù)制粘貼即可使用)
關(guān)于vue項(xiàng)目中會(huì)出現(xiàn)一些需求,就是右鍵菜單項(xiàng)的功能實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue封裝一個(gè)右鍵菜單組件(復(fù)制粘貼即可使用)的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要給大家介紹了關(guān)于vue3中使用codemirror的詳細(xì)教程,CodeMirror是一款功能強(qiáng)大的代碼高亮插件,他不僅提供了高亮功能,其豐富的方法屬性也封裝了縮進(jìn)、自動(dòng)換行、獲取編輯文本、設(shè)置編輯文本、回退功能等多種實(shí)用效果,需要的朋友可以參考下2023-09-09
基于Vue3自定義實(shí)現(xiàn)圖片翻轉(zhuǎn)預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3自定義實(shí)現(xiàn)簡(jiǎn)單的圖片翻轉(zhuǎn)預(yù)覽功能,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,有需要的小伙伴可以參考一下2023-10-10
如何封裝了一個(gè)vue移動(dòng)端下拉加載下一頁(yè)數(shù)據(jù)的組件
這篇文章主要介紹了如何封裝了一個(gè)vue移動(dòng)端下拉加載下一頁(yè)數(shù)據(jù)的組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
詳解vuex結(jié)合localstorage動(dòng)態(tài)監(jiān)聽(tīng)storage的變化
這篇文章主要介紹了詳解vuex結(jié)合localstorage動(dòng)態(tài)監(jiān)聽(tīng)storage的變化，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
這篇文章主要介紹了如何使用ant-design-vue的Table組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue2中組件互相調(diào)用實(shí)例methods中的方法實(shí)現(xiàn)詳解
vue在同一個(gè)組件內(nèi),方法之間經(jīng)常需要互相調(diào)用,下面這篇文章主要給大家介紹了關(guān)于vue2中組件互相調(diào)用實(shí)例methods中的方法實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
Avue實(shí)現(xiàn)動(dòng)態(tài)查詢與數(shù)據(jù)展示的示例代碼
Avue是一個(gè)基于Vue.js的前端框架,它是由阿里云開(kāi)發(fā)的一款企業(yè)級(jí)UI組件庫(kù),旨在提供一套全面、易用且高性能的界面解決方案本文介紹了Avue實(shí)現(xiàn)動(dòng)態(tài)查詢與數(shù)據(jù)展示的示例,需要的朋友可以參考下2024-08-08
淺談Vue static 靜態(tài)資源路徑 和 style問(wèn)題
這篇文章主要介紹了淺談Vue static 靜態(tài)資源路徑 和 style問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Pinia簡(jiǎn)單使用以及數(shù)據(jù)持久化詳解
最近正在使用Pinia進(jìn)行狀態(tài)管理,我希望在重新刷新頁(yè)面時(shí)保持狀態(tài),下面這篇文章主要給大家介紹了關(guān)于Pinia簡(jiǎn)單使用以及數(shù)據(jù)持久化的相關(guān)資料,需要的朋友可以參考下2022-05-05