vite proxy同時配置多個代理方式
更新時間：2025年12月04日 14:29:50 作者：W如Q揚
文章介紹如何在前端開發(fā)中配置多個代理進行本地mock,以便同時處理開發(fā)完成和未開發(fā)完成的接口,主要步驟包括修改`.env.development`文件,創(chuàng)建并配置`request-mock.js`文件,以及在`vite.config.js/ts`中添加代理配置
背景
前端開發(fā)時會碰到有些后端接口未開發(fā)完成，需要進行本地mock，這個時候就需要配置多個代理，開發(fā)完成的接口連接本地或者測試環(huán)境后端，未開發(fā)完成的接口連接本地mock。
實現(xiàn)步驟
修改.env.development
里面一般有一個如下的配置
VITE_APP_BASE_API='/api'
在之后添加一行
VITE_APP_BASE_API_MOCK='/api-mock'
將request.js或者request.ts 一般放在utils目錄下，拷貝一份，重命名為request-mock.js或者request-mock.ts
將request-mock.js里面的 VITE_APP_BASE_API 全部替換為 VITE_APP_BASE_API_MOCK
修改vite.config.js/ts，在proxy中添加一個配置如下;
server: {
port: 8888,
host: true,
open: true,
proxy: {
'/api': {
target: 'http://localhost:8889',
changeOrigin: true
}
'/api-mock': {
target: 'http://localhost:8890',
changeOrigin: true
}
}
}
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了在vue中使用?jquery?的兩種方法小結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要給大家介紹了關(guān)于Vue組件化常用方法之組件傳值與通信的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了Vue中android4.4不兼容問題的解決方法,需要的朋友可以參考下2018-09-09
本文主要介紹了Vue3 defineComponent作用，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
Vue跳轉(zhuǎn)到新頁面再返回到舊頁面保持狀態(tài)不變的問題
這篇文章主要介紹了Vue跳轉(zhuǎn)到新頁面再返回到舊頁面保持狀態(tài)不變的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
Vue3路由高級玩法實戰(zhàn)指南從模塊化到企業(yè)級實踐
VueRouter4通過一系列改進,提升了對復(fù)雜應(yīng)用的支持,核心變化包括更現(xiàn)代的創(chuàng)建方式、更靈活的動態(tài)路由和守衛(wèi)系統(tǒng),文章還探討了模塊化路由管理、權(quán)限控制、懶加載、動畫以及企業(yè)級實踐,強調(diào)了在實際項目中靈活應(yīng)用這些特性的重要性,感興趣的朋友跟隨小編一起看看吧2026-03-03
創(chuàng)建vue報錯vue-cli?Failed?to?download?repo?vuejs-templates/
通過vue-cli創(chuàng)建Vue項目時,若遇到連接超時錯誤,可采用離線方式解決,具體操作是下載并解壓vue-templates/webpack到本地.vue-templates目錄,再使用--offline參數(shù)重新執(zhí)行初始化命令2024-09-09
Vue3中的createGlobalState用法及示例詳解
createGlobalState 是 Vue 3 中一種管理全局狀態(tài)的簡便方式,通常用于管理多個組件間共享的狀態(tài),由 @vueuse/core 提供的,允許創(chuàng)建一個響應(yīng)式的全局狀態(tài),本文給大家介紹了Vue3中的createGlobalState用法及示例,需要的朋友可以參考下2024-10-10
vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問題
這篇文章主要介紹了vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10