为啥我用Vue.use(axios)报错了！（） vue.js前端

用了这么久的vue，却不知道vue.use()是个啥。。。我还记得之前练习过一个项目，用到了axios,然后后边死活报错无法请求并获取到数据。文件没在身边，我现场还原一下情景，也算是记录一下自己之前犯过的错误。
util文件夹中的request.js文件

import axios from 'axios'; import qs from 'qs'; const axiosInstance = axios.create({ baseURL: 'http://example.com', // 当时用的真地址（可以请求的） timeout: 5000, })// 设置了请求拦截器，处理下post方法传的参数格式问题 axiosInstance.intercepter.request.use( config => { // 利用qs转换了一下data的格式，让post方法能够正确识别传参 config.data = https://www.it610.com/article/config.method =='post' ? qs.stringify(config.data) : config.data; return config; }, err => Promise.reject(console.log(err)) )export default axiosInstance;

main.js文件

import Vue from 'vue'; import App from './App.vue'; import axios from '../util/request.js'; // 将自己封装的axios挂载到vue的实例对象上，供全局使用 Vue.prototype.$axios = axios; // 其实我在这里已经不用再操作啥了...然后鬼使神差的... Vue.use(axios); // 报错点，迷了很长时间，一行一行代码调试才发现的，凎！！！new Vue({ render: function(h) { return h(App); } }).$mount('$app')

然后就开始报错了。。

文章图片

竟然报跨域的错。。然后我就又设置了啥proxy代理啊，啥的一堆，最后才知道绕远了（请求的url后台是处理过跨域的）
调试到Vue.use时才发现，就是因为多写了这么一行才出错了。
到了这里我就疑问了，Vue.use()不是将插件全局混入到vue中吗？为啥axios不能使用use方法？
Vue.use()到底是啥？ 【为啥我用Vue.use(axios)报错了！（）】于是乎，上网查了一些资料，“Vue.use()到底干啥用的？”
通过学习发现，Vue.use()方法实际上是调用了插件中install函数，检测use()方法中传入的是对象还是函数，如果是对象，那么就调用对象中的install方法（函数），如果是函数（function），那么就直接调用这个函数（插件本身）。
通过打印axios的类型可以清晰的看到，axios插件本身就是一个函数（function），所以Vue.use会直接调用axios。