【Vue】控制台报错“Uncaught (in promise) TypeError: Cannot read properties of undefined”

问题描述：

【Vue】控制台报错“Uncaught (in promise) TypeError: Cannot read properties of undefined”

问题现象：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol')
   at isURLSameOrigin (isURLSameOrigin.js?3934:57:1)
   at dispatchXhrRequest (xhr.js?b50d:115:1)
   at new Promise (<anonymous>)
   at xhrAdapter (xhr.js?b50d:13:1)
   at dispatchRequest (dispatchRequest.js?5270:52:1)
isURLSameOrigin @ isURLSameOrigin.js?3934:57
dispatchXhrRequest @ xhr.js?b50d:115
xhrAdapter @ xhr.js?b50d:13
dispatchRequest @ dispatchRequest.js?5270:52

问题原因：

文件main.js中引入 axios 的方式使用了 Vue.use()。

imprt axios from "axios"

Vue.use(axios);

Vue.use()，这个方法适用于Vue生态内的插件。

Vue.use() 的传参必须是Object 或 Function类型。如果 是 Object 类型，该对象就必须有 install 方法；如果是 Function类型，该函数会被作为 install 方法去调用

综上所述，原因总结如下：

• axios不是Vue的生态内插件
• axios没有install方法。

vue.use()方法详情了解：掘金 - 【Vue】Vue.use()

解决方案：

引入 axios 方式修改为原型链式引入，如下：

imprt axios from "axios"

Vue.prototype.axios = axios

拓展

适用场景：

• Vue.use()适合于Vue生态内的插件
• Vue.prototype适合于非Vue生态的插件

Vue.use() 和 Vue.prototype 的相同点：

• 都是将插件挂载到Vue上的方式

Vue.use() 和 Vue.prototype 的区别：

• Vue.use():

  • 插件需要 install 方法(要求插件必须实现instal方法或者该插件本身就是函数)实现，灵活性高，可扩展性强

• vue.prototype:

  • 插件直接赋值使用，简单粗暴，拿来就用