一、问题：为什么我设置axios的baseURL失效呢？

最近接手一个vue项目，组件中使用axios的方式有两种：

1️⃣

import axios from 'axios'
axios.post().then

2️⃣

this.axios.post().then()

在main.js主要引用如下：

import axios from 'axios'

axios.create({
  baseURL: 'url',
  timeout: 2000, // 请求超时时间
})
axios.interceptors.response.use(
  response => {
   return response
  },
  error => {
     return Promise.reject(error)
  }
)

Vue.prototype.$axios = axios

按照以上，出现无论哪种方式，baseURL都没有生效，这是为什么呢？

🎷原因：

创建axios实例两种方式：

1、import axios from ‘axios’

2、axios.create()

两者返回axois实例不同

😄解决

main.js中加入：

axios.defaults.baseURL = 'url'

上面的两种方式都采用这个默认的设置。

😆扩展

尽管解决了原有代码逻辑，但不推荐第一种方式，因为使用 create 方法更加灵活，毕竟不是所有模块的baseURL都是相同的，建议使用：

const request = axios.create({
  baseURL: global_.BASE_URL,
 })

自己封装request，简单可参考：https://www.cnblogs.com/cc123nice/p/12593857.html。

也可以自己编写installer,使用Vue.use()，见后续

---

二、baseURL设置格式?

前端访问路径如果存在：前端应用名（假设：front），会有如下情况：

baseURL设置为：xsscapi后，请求路径变为：http://ip:port/front/xsscapi/phone/getUserForZwwx.action?sys=xsscapi

devServer设置：/xsscapi，代理不生效

注意这里带上了应用名url：即front

✅ baseURL设置为：/xsscapi后

devServer设置：/xsscapi 生效

---

注意baseURL,不是baseUrl，网上不少问题是因为这个。