axios 配置多个baseURL，不同前缀代理到不同的服务器

项目场景：

工作中遇到不同功能模块，使用的接口请求前缀不同，需要配置代理到不同的服务器地址。

问题描述

不同模块接口示例：

代理的域名：http://192.168.1.105:8000

模块1示例接口：http://192.168.1.105:8000/rc-flow/getList（流程相关）

模块2示例接口：http://192.168.1.105:8000/rc-portal-web/rc-portal-api/getList（业务相关）

模块3示例接口：http://192.168.1.105:8000/login/getInfo (登录相关)

注：以上rc-flow、rc-portal-web/rc-portal-api、login为要设置的baseUrl

解决方案：

1. 首先新建文件apiType.js

   let api = 'VUE_APP_BASE_API' let flow = 'VUE_APP_FLOW_API' let logins = 'VUE_APP_LOGIN_API' export { api, logins, flow }

2.  接口调用使用

   import request from '@/config/axios' import {share, flow,login} from "@/config/axios/apiType"  //登录相关 export const listData = async (query) => {   return await request.getOriginal({     url: '/system/dict/data/list',     params: query,     requestBase: login,   }) } //流程相关 export const listData = async (query) => {   return await request.getOriginal({     url: '/shareParamter/dumptra/add',     params: query,     requestBase: flow,   }) } //业务相关 export const listData = async (query) => {   return await request.getOriginal({     url:'/shareParamter/configcode/list',     params: query,     requestBase: share,   }) } 

3.  定义环境变量

   #.env.development # base api VUE_APP_BASE_API = '/api' VUE_APP_FLOW_API = '/rc-portal-web/rc-portal-api' VUE_APP_LOGIN_API = '/login'

4. 在axios封装，请求拦截器中判断设置不同baseURL

   /**  * @author ""  * @description axios初始化  */ const instance = axios.create({     baseURL,     timeout: requestTimeout,     // withCredentials: true, // 是否携带cookie     headers: {         'Content-Type': contentType,     }, })  /**  * @author ""  * @description axios请求拦截器  */ instance.interceptors.request.use(     (config) => {         // axios中引入多个baseURL         switch (config.requestBase) {             case 'VUE_APP_BASE_API':                 config.baseURL = process.env.VUE_APP_BASE_API;                 break             case 'VUE_APP_FLOW_API':                 config.baseURL = process.env.VUE_APP_FLOW_API;                 break             case 'VUE_APP_LOGIN_API':                 config.baseURL = process.env.VUE_APP_LOGIN_API;                 break             default:                 config.baseURL = process.env.VUE_APP_FLOW_API;                 break         }         .........         return config     },     (error) => {         return Promise.reject(error)     } )

    
5. 配置代理地址 

   //vue.config.js  module.exports = {     publicPath,     assetsDir,     outputDir,     lintOnSave,     devServer: {         hot: true,         port: devPort,         open: true,         proxy: {             [process.env.VUE_APP_BASE_API]: {                 target: 'http://192.168.1.105:8000/rc-flow',                 changeOrigin: true,                 pathRewrite: {                     ['^' + process.env.VUE_APP_BASE_API]: "",                 },             },             [process.env.VUE_APP_FLOW_API]: {                 target: 'http://192.168.1.105:8000/rc-portal-web/rc-portal-api',                 changeOrigin: true,                 pathRewrite: {                     ['^' + process.env.VUE_APP_FLOW_API]: "",                 },             },             [process.env.VUE_APP_LOGIN_API]: {                 target:https://console-mock.apipost.cn/mock/4769c82c-c0bf-4ee3-8574-9096e9e3a59f,                 changeOrigin: true,                 pathRewrite: {                     ['^' + process.env.VUE_APP_LOGIN_API]: "",                 },             },         },         client: {             overlay: false         },      },     }