前端配置多个后台地址： baseUrl

最新推荐文章于 2025-01-02 09:30:00 发布

wytraining

最新推荐文章于 2025-01-02 09:30:00 发布

阅读量4.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 接口 proxy

本文链接：https://blog.youkuaiyun.com/wytraining/article/details/118765138

vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了在Vue项目中如何配置axios以访问多个后台地址。通过设置vue.config.js中的baseUrl，结合axios的封装，实现了接口请求时根据不同前缀自动匹配对应后台。在使用sucHttp进行请求时，接口路径会被自动加上特定前缀并匹配vue.config.js中的配置，确保请求正确发送到相应后台，本地显示的sucHttp在实际请求时会被清除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue.config.js 中配置不同的前缀，以及所对应的后台地址

devServer: {
   proxy: {
        "/api": {
            target: "http://172.xx.x.xxx:xxxx", // 地址1   //表示/api替换成该地址
            changeOrigin: true,
            pathRewrite: {
                "^/api": "",    //重写api为空
            },
        },
        "/sucHttp": {
            target: "http://172.xx.x.xxx:xxxx", // 地址2    //表示/sucHttp替换成该地址
            changeOrigin: true,
            pathRewrite: {
                "^/sucHttp": ""    //重写sucHttp为空
            }
        },
    },
},

2.main.js中配置axios（默认api）

import axios from 'axios';

if (process.env.NODE_ENV === 'development') {
	 //开发环境 do something
	 axios.defaults.baseURL = './api';
} else {
	 //生产环境 do something
	 axios.defaults.baseURL = '';
 }

Vue.prototype.$http = axios;  创建$http实例，在项目中使用

使用：

import http from "axios";

export const getUrl = (params): Promise<object | any> => {
    const url = `接口名称`;
    return http.get(url, {params: params}).then((res: any) => res.data);
};

3.sucHttpApi.js 中配置 axios （sucHttp）

import axios from 'axios'

let sucHttp = axios.create({
    baseURL: process.env.NODE_ENV === "development" ? "./sucHttp" : "线上地址"
})

使用：

export const getDesNum = () => {
    const url = `接口名称`
    return sucHttp.get(url).then(res => res.data);
}

用了 sucHttp 请求的接口，会自动加上 sucHttp前缀 ，它会去匹配 vue.config.js 中的前缀，并连接到相应的后台地址，在连接之后会置空 sucHttp（所以我们在本地看到的所有接口请求中都会带有sucHttp，但实际请求时其实并没有，因为已置空）

聊聊 Vue 中 axios 的封装