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)文章
這篇文章主要為大家介紹了c++游戲教程使用easyx實現(xiàn)大飛機示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
使用Vue3和Plotly.js繪制動態(tài)3D圖表的示例代碼
在數(shù)據(jù)可視化應(yīng)用中,需要將數(shù)據(jù)動態(tài)加載到圖表中并進(jìn)行實時更新,本文將展示如何使用Plotly.js和Vue.js實現(xiàn)這一功能,從加載外部數(shù)據(jù)到創(chuàng)建交互式圖表,文中有相關(guān)的代碼示例供大家參考,需要的朋友可以參考下2024-06-06
關(guān)于vue的語法規(guī)則檢測報錯問題的解決
在配置路有的時候，陸續(xù)出現(xiàn)了各種報錯其中最多的是一些寫法，例如空格，縮進(jìn)，各種括號，這篇文章主要介紹了關(guān)于vue的語法規(guī)則檢測報錯問題的解決，非常具有實用價值，需要的朋友可以參考下2018-05-05
談一談vue請求數(shù)據(jù)放在created好還是mounted里好
這篇文章主要介紹了談一談vue請求數(shù)據(jù)放在created好還是mounted里好的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
keep-alive是Vue中的一個內(nèi)置組件,用于緩存非活動組件實例,避免重復(fù)渲染,優(yōu)化性能,本文給大家介紹vue中的keep-alive用法指南,感興趣的朋友一起看看吧2024-10-10
vue實現(xiàn)鼠標(biāo)經(jīng)過顯示懸浮框效果
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)鼠標(biāo)經(jīng)過顯示懸浮框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
使用ElementUI修改el-tabs標(biāo)簽頁組件樣式
這篇文章主要介紹了使用ElementUI修改el-tabs標(biāo)簽頁組件樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue3觸發(fā)父組件兩種寫法,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細(xì)介紹了vue+iview實現(xiàn)分頁及查詢功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了Vue中前端與后端如何實現(xiàn)交互，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09