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 (<anonymous>)
    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原型鏈上使用；