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

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

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
  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值