Vue开发遇坑记--各模块发请求至不同的本地后端地址

需求： 一个项目中不同的模块对应的后台本地地址不同，如何用一个配置好的axios来发送？

举例： A 问卷模块的所有API发送至 8081； B 微信模块的所有API发送至 8086

✅

1. 在开发环境下 .env.development配置文件中 定义好想要去的url地址 如VUE_APP_BASE_API='http://192.xxx.xx.xxx:8086'

2. 在自己模块下要发送请求的文件如api/index.js中配置此模块要发送的后端地址const baseURL = process.env.VUE_APP_BASE_API

3. 在本模块的api文件下，创建一个本模块请求专用的函数 requestB ，把之后用requestB配置的参数 放入，把之前在base文件见下配置的axios参数结构出来，并替换成本模块中定义的baseURL ，之后这个api中所有请求都用 requestB 来发送

总结：
创建请求时可以用的配置选项，只有url是必须的。其他axios.create里写的东西生成的axios配置对象里就会带。
url和method和data等参数也是放到配置对象里的,所以结构出来重新赋值baseURL生成的新axios直接拿来发请求就行了

import request from '@/base/service' //request为base中基础配置好了拦截等参数的axios
const baseURL = process.env.VUE_APP_BASE_API //这个模块要的发送至的后端地址 

const requestB = data => {
  return request({
    ...data,
    ...{
      baseURL
    }
  });
};


// request中axios create的时候已经配置了`baseURL`，`timeout`，`withCredentials` 等信息