VUE项目中调用如何两个接口

qq_28141257

已于 2022-04-26 14:58:46 修改

阅读量5.1k

点赞数 1

文章标签： vue

于 2022-04-26 13:22:10 首次发布

本文链接：https://blog.youkuaiyun.com/qq_28141257/article/details/124425518

版权

本文介绍了如何在Vue项目中通过vue.config.js配置开发服务器的代理，处理两个不同服务器的请求，并更新axios的baseURL以发送无前缀接口请求。还展示了如何封装带不同前缀的请求方法。

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

在项目根目录下新建config.js文件

vue.config.js 配置

module.exports = {
    devServer: {
        port: 8080,
        proxy: {
            // 要走第二個服務器的URL 的寫法 : /api + 远程机器的path   
            // 第一台服务器配置 
            '/api': {
                //目标路径
                target: 'http://localhost:8000/api/',
                ws: true,
                //允许跨域
                changeOrigin: true,
                //重写路径
                pathRewrite: {
                    '^/api': '/'
                }
            },

            // 要走第二個服務器的URL 的寫法 : /api2 + 远程机器的path   
            // 第二台服务器配置 
            '/sec': {
                //目标路径
                target: 'http://localhost:9081',
                ws: true,
                //允许跨域
                changeOrigin: true,
                 //重写路径
                pathRewrite: {
                    '^/sec': '/'
                }
            }
        }
    }
}

2.axios修改配置,让axios配置地址为空字符串

let instance = axios.create({
    baseURL: ""
});

3.封装请求方法中,前缀调用不同接口发送请求

//  请求前缀为"/api"
export function addUsers(data) {
     return instance.post('/api/server/append', {...data });
 }

//  请求前缀为"/sec"
 export function getOtherAPi() {
     return instance.get('/sec');
 }