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)文章
解決vue組件渲染沒(méi)更新數(shù)據(jù)問(wèn)題
本文主要介紹了解決vue組件渲染沒(méi)更新數(shù)據(jù)問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
vue項(xiàng)目使用websocket連接問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目使用websocket連接問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
復(fù)刻畫龍產(chǎn)品vue實(shí)現(xiàn)新春氣泡兔
這篇文章主要為大家介紹了復(fù)刻畫龍產(chǎn)品之使用vue實(shí)現(xiàn)新春氣泡兔示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01
vue中this.$refs有值,但無(wú)法獲取ref的值問(wèn)題及解決
這篇文章主要介紹了vue中this.$refs有值,但無(wú)法獲取ref的值問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01

