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

Vue报错: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘protocol’)

  • 报错信息:
    Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol')
    at isURLSameOrigin (isURLSameOrigin.js?3934:57)
    at dispatchXhrRequest (xhr.js?b50d:145)
    at new Promise ()
    at xhrAdapter (xhr.js?b50d:15)
    at dispatchRequest (dispatchRequest.js?5270:58)
    at Axios.request (Axios.js?0a06:108)
    at wrap (bind.js?1d2b:9)
    at Function.Vue.use (vue.runtime.esm.js?2b0e:5123)
    at eval (main.js?56d7:17)
    at Module../src/main.js (app.js:1134)
  • 问题原因,main.js中引用axios区别:
import axios from "axios";

Vue.use(axios);
  • 正确写法:
import axios from "axios";

Vue.prototype.axios = axios;

vue.use和vue.prototype的区别

通过调查资料了解到:

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

import from "vuex";		// 官方插件vuex
Vue.use(Vuex);
Vue.prototype.axios = axios;

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

你可能感兴趣的:(Vue学习记录,前端,vue.js,chrome,devtools,javascript,ajax)