TypeError: Cannot read properties of undefined (reading ‘protocol‘)

问题描述：

vue 使用 axios 报错 （虽然数据能正常请求到，但是控制台报错）

解决办法：

修改 main.js  中的 引入 axios 代码

 原先的代码

// 引入 axios
import axios from 'axios'
Vue.use(axios)

出现上面错误的原因就是将axios当做Vue的插件使用了，使用 Vue.use 引入 axios 这是错误的，

正确的做法如下：

// 引入 axios
import axios from 'axios'
// 配置vue原型 (在任何组件中都可以正常使用 axios ）
Vue.prototype.http = axios

Vue.prototype.axios = axios;   效果也是一样的

 上述引入 axios 配置完成了 ，在代码中 就可以正常使用 this.http.get 或 axios.get 请求接口

 也可以在 main.js 中 配置 axios 的默认根路径 ，这样代码中就可以省略很多重复路径

//配置 默认根路径

axios.defaults.baseURL = 'https://xxxx.xxxxx.xxx/'

vue.use和vue.prototype的区别 

1、不是为了vue写的插件(插件内要处理)不支持Vue.use()加载方式
2、非vue官方库不支持new Vue()方式
3、每一个vue组件都是Vue的实例，所以组件内this可以拿到Vue.prototype上添加加的属性和方法

总结

解决报错 的方法就是 在 main.js中 修改 引入 axios 的方式

Vue.prototype.axios = axios;

主要是由于插件内部编码方式不同，axios不是按照 vue 规则设计的插件（准确地说不是专门为vue服务），建议用Vue.prototype添加到vue原型链上使用；

---

文章如有错误，恳请大家提出问题，本人不胜感激 。 不懂的地方可以评论，我都会一一回复

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力     长路漫漫，道阻且长

  转载请注明出处：https://blog.csdn.net/qq_52855464/article/details/125328513?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22125328513%22%2C%22source%22%3A%22qq_52855464%22%7D&ctrtid=vVn5w