为什么我设置axios的baseURL失效呢

为什么我设置axios的baseURL失效呢

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

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

1️⃣

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

2️⃣

this.axios.post().then()

在main.js主要引用如下：

import axios from 'axios&#ate({baseURL: 'url',timeout: 2000, // 请求超时时间
})
sponse.use(response => {return response},error => {ject(error)}
)Vue.prototype.$axios = axios

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

🎷原因：

创建axios实例两种方式：

1、import axios from ‘axios’

2、ate()

两者返回axois实例不同

😄解决

main.js中加入：

axios.defaults.baseURL = 'url'

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

😆扩展

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

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

自己封装request，简单可参考：.html。

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

二、baseURL设置格式?

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

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

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

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

✅ baseURL设置为：/xsscapi后

devServer设置：/xsscapi 生效

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