Vue3如何配置多級(jí)代理
Vue3配置多級(jí)代理
在Vue3項(xiàng)目中,我們可以通過(guò)修改 vue.conig.js或者vue.conig.ts 文件來(lái)配置多個(gè)proxy。
下面是一個(gè)示例的 vue.config.ts 文件,我分別設(shè)置了兩個(gè)不同的請(qǐng)求地址,分別用于處理不同的請(qǐng)求。
1、在vite.config.ts里面配置
export default defineConfig({
plugins: [vue()],
server: {
open: true, //自動(dòng)打開瀏覽器
host: "0.0.0.0",
port: 8989,
// 設(shè)置反向代理,跨域
proxy: {
'/get': {
// 后臺(tái)地址
target: 'https://xxx.xxx.xxx.x:8080', //填寫后臺(tái)真實(shí)地址
changeOrigin: true,
// 訪問(wèn)https的接口,需要加secure
secure: false,
rewrite: path => path.replace(/^\/get/, '')
},
'/api': {
// 后臺(tái)地址
target: 'https://xxx.xxx.xxx.x:8080', //填寫后臺(tái)真實(shí)地址
changeOrigin: true,
// 訪問(wèn)https的接口,需要加secure
secure: false,
rewrite: path => path.replace(/^\/api/, '')
},
})2.配置axios
// axiosInstance.js
import axios from "axios";
import { getToken } from "/src/utils/auth";
// 創(chuàng)建一個(gè) Axios 實(shí)例
const API = axios.create({
timeout: 60000, // 請(qǐng)求超時(shí)設(shè)置,單位ms
});
// 請(qǐng)求攔截器
API.interceptors.request.use(
(config) => {
// 動(dòng)態(tài)設(shè)置 baseURL
if (config.url.startsWith('/get')) {
config.baseURL = '/get';
} else {
config.baseURL = '/api';
}
// 將 token 添加到請(qǐng)求頭中
config.headers["token"] = getToken();
return config;
},
(error) => {
// 請(qǐng)求錯(cuò)誤處理
console.log(error); // 調(diào)試
return Promise.reject(error);
}
);
export default API;使用:根據(jù)請(qǐng)求的 URL 自動(dòng)選擇不同的 baseURL
import API from './axiosInstance';
// 請(qǐng)求使用 baseURL 為 /get
API.get('/get/user/login').then(res => {
console.log(res.data);
});
// 請(qǐng)求使用 baseURL 為 /api
API.get('/api/admin/login').then(res => {
console.log(res.data);
});總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
element-plus 在vue3 中不生效的原因解決方法(element-plus引入)
這篇文章主要介紹了element-plus 在vue3 中不生效的原因解決方法(element-plus引入),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
Vue中computed及watch區(qū)別實(shí)例解析
這篇文章主要介紹了Vue中computed及watch區(qū)別實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
解決vue項(xiàng)目中出現(xiàn)Invalid Host header的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目中出現(xiàn)"Invalid Host header"的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue實(shí)現(xiàn)當(dāng)訪問(wèn)的路由不存在時(shí)跳轉(zhuǎn)到404頁(yè)面的方法詳解
在 Vue3 中,可以使用 Vue Router 實(shí)現(xiàn)跳轉(zhuǎn)到 404 頁(yè)面,即當(dāng)用戶訪問(wèn)一個(gè)不存在路由時(shí),系統(tǒng)會(huì)默認(rèn)跳轉(zhuǎn)到 404 頁(yè)面,本文給大家介紹了一個(gè)簡(jiǎn)單的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-12-12
vue3頁(yè)面query參數(shù)變化并重新加載頁(yè)面數(shù)據(jù)方式
在Web開發(fā)中,頁(yè)面間的跳轉(zhuǎn)及數(shù)據(jù)刷新是常見(jiàn)問(wèn)題,通過(guò)使用$router.push和$router.replace方法,可以控制頁(yè)面跳轉(zhuǎn)的行為,具體操作時(shí),若發(fā)現(xiàn)頁(yè)面ID變更后數(shù)據(jù)未刷新,可通過(guò)給router-view標(biāo)簽添加key值解決,若使用keep-alive2024-10-10
vue?懸浮窗且?guī)ё詣?dòng)吸附功能實(shí)現(xiàn)demo
這篇文章主要為大家介紹了vue?懸浮窗且?guī)ё詣?dòng)吸附功能實(shí)現(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06

