Vue3如何配置多级代理
作者：在努力的前端小白
这篇文章主要介绍了Vue3如何配置多级代理问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue3配置多级代理
在Vue3项目中，我们可以通过修改 vue.conig.js或者vue.conig.ts 文件来配置多个proxy。
下面是一个示例的 vue.config.ts 文件，我分别设置了两个不同的请求地址，分别用于处理不同的请求。
1、在vite.config.ts里面配置
export default defineConfig({
plugins: [vue()],
server: {
open: true, //自动打开浏览器
host: "0.0.0.0",
port: 8989,
// 设置反向代理，跨域
proxy: {
'/get': {
// 后台地址
target: 'https://xxx.xxx.xxx.x:8080', //填写后台真实地址
changeOrigin: true,
// 访问https的接口，需要加secure
secure: false,
rewrite: path => path.replace(/^\/get/, '')
},
'/api': {
// 后台地址
target: 'https://xxx.xxx.xxx.x:8080', //填写后台真实地址
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";
// 创建一个 Axios 实例
const API = axios.create({
timeout: 60000, // 请求超时设置，单位ms
});
// 请求拦截器
API.interceptors.request.use(
(config) => {
// 动态设置 baseURL
if (config.url.startsWith('/get')) {
config.baseURL = '/get';
} else {
config.baseURL = '/api';
}
// 将 token 添加到请求头中
config.headers["token"] = getToken();
return config;
},
(error) => {
// 请求错误处理
console.log(error); // 调试
return Promise.reject(error);
}
);
export default API;使用：根据请求的 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);
});总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。