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