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
           },
   
       },
      
   }