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