这篇文章主要介绍了vue项目中使用axios遇到的相对路径和绝对路径问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
- 使用axios遇到的相对路径和绝对路径问题
- 1.设置全局baseURL
- 2.覆盖baseURL
- axios设置访问基础路径
- 在main.js 做如下配置
- 可能会遇到下面的报错
使用axios遇到的相对路径和绝对路径问题
部分依赖说明：
- "
vue": "^2.5.2", - "
webpack": "^3.6.0", - "
axios": "^0.19.0",
通过设置全局baseURL，在其他组件中使用axios时便可以很方便。有时又可以根据需要在具体的请求配置中设置新的baseURL以覆盖全局的baseURL。在这些过程中，可能需要正确的使用相对路径和绝对路径才能达到预期的效果。
1.设置全局baseURL
首先在main.js中设置axios.defaults.baseURL = '/api';
绝对路径的形式：
1.url设置时，开头使用/，如下方的使用axios发起的post请求：
axios({
//请求方式为post
method: 'post',
//绝对路径
url: '/user/12345',
//data等设置省略
......
});
其完整的Request URL为：http://localhost:8080/api/user/12345
2.url设置时，直接使用http或https开头，如下方使用axios发起的get请求：
axios({
//请求方式为get
method:'get',
//绝对路径
url:'http://192.168.6.66:8080/user/12345',
//其他设置省略
......
})
其完整的Request URL为：http://192.168.6.66:8080/user/12345
2.覆盖baseURL
在当前界面下，需要发起请求，而且这个请求的baseURL不再是已经设置好的全局baseURL时，这时需要在请求配置中设置新的baseURL（如res）用来覆盖全局设置的baseURL:api。
最初的印象中，使用axios发起请求时设置的url及完整的Request URL似乎与发起请求的操作所在界面的url路径无关。但实际效果如何呢？这些有和绝对路径和相对路径有什么关系呢？
2.1.当前界面所在URL
当前界面所在的URL为：http://localhost:8080/app/pro
2.2.使用相对路径
以发送post请求为例，请求配置如下：
axios({
//请求方式为post
method: 'post',
//绝对路径
url: '/pic/',
//`baseURL`将自动加在`url`前面，除非`url`是一个绝对URL。
baseURL: 'res',
//data等设置省略
......
});
其完整的Request URL为：http://localhost:8080/app/res/pic/，可以看到并不能达到想要的结果。
2.3.使用绝对路径
还是以发送post请求为例，请求配置如下：
axios({
//请求方式为post
method: 'post',
//绝对路径
url: '/pic/',
//`baseURL`将自动加在`url`前面，除非`url`是一个绝对URL。
baseURL: '/res',
//data等设置省略
......
});
其完整的Request URL为：http://localhost:8080/res/pic/，可以看到此时将baseURL的值由api覆盖为res，达到了预期的效果。
参考：https://github.com/axios/axios/blob/master/README.md
axios设置访问基础路径
看过axios的官方文档后配置变得简单：
在main.js 做如下配置
import axios from 'axios' axios.defaults.baseURL = 'http://10.202.42.24:8080/sf-cloud-web' Vue.prototype.axios = axios
最后一行是将axios配置到Vue原型中，使用方法为：
this.axios.get('/test/1').then(function (response) {}）
可能会遇到下面的报错
isURLSameOrigin.js?cf95:57 Uncaught (in promise) TypeError: Cannot
read property 'protocol' of undefined
这是因为axios不是VUE插件，不能使用 Vue.use(axios) 方式引用，需要使用上述原型方式引入
以上为个人经验，希望能给大家一个参考，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- 解决vue单页面应用打包后相对路径、绝对路径相关问题
- Vue 打包后相对路径的引用问题
- vuecli4中如何配置打包使用相对路径
