vue yarn安装axios vue安装axios出错

Vue3全局挂载axios的报错解决方案

• 一、前言
• 二、全局挂载
• 三、使用全局

一、前言

为了方便后期开发的便捷性，vue可以方便的将axios挂载到全局进行使用，大大的提高了前后端开发速度和减少了后期的维护成本。
可是随着vue的迭代发展，目前主流的vue2和出了没多久的vue3在使用上和语法上或多或少的都出现了分歧，导致有的开发者从vue2过渡到vue3时有许多很不习惯的地方，也有很多奇奇怪怪的bug出现，这里奉上我使用vue3过程中出现的bug，希望能帮到大家。

二、全局挂载

1. Vue2全局挂载
   vue2的挂载可以说是比较老生常谈了，就不多讲，直接贴代码。

import Vue from 'vue'
import router from '@/router'
import store from '@vuex'
import Axios from 'axios'
import Utils from '@/tool/utils'
import App from './App.vue'

// ...
//配置全局请求根路径
axios.defaults.baseURL = 'http://localhost:8888'
/* 挂载全局对象 start */
Vue.prototype.$http = Axios;
Vue.prototype.$utils = Utils;
/* 挂载全局对象 end */

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2. Vue3全局挂载
   但是最让我感到疑惑的是对Vue3的挂载，我看有的老师和有的贴友都是用这种方式进行挂载

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import axios from 'axios'
import app from "@/App"
//配置全局请求根路径
axios.defaults.baseURL = 'http://localhost:8888'
// 使用globalProperties挂载
app.config.globalProperties.$http = axios

App.use(ElementPlus).mount('#app')

但是运行后会导致如下报错，且页面无法显示，说明axios挂载失败：

点击进去发现是这一行app.config.globalProperties.$http = axios出了问题，无法对axios进行挂载，这点就是很神奇，我翻遍网上，发现大家就是用globalProperties这个官方提供的api实现挂载，那么是哪里有问题呢？

后来发现论坛里有一位大佬的贴子，他是按这样的方法进行挂载

看到这里就很明显的发现到了问题，需要用const来对创建的App对象进行声明后才能进行使用，于是乎我尝试将原来的代码修改如下：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import axios from 'axios'

//配置全局请求根路径
axios.defaults.baseURL = 'http://localhost:8888'
//将axios作为全局自定义属性，每个组件可直接在内部直接访问

const app = createApp(App)
app.config.globalProperties.$http = axios // 使用globalProperties挂载，util全局挂在也一样
app.use(ElementPlus).mount('#app')

其他工具的全局挂载也是一样的原理

app.config.globalProperties.$util = util

修改实验后发现问题得到了解决，页面也成功从后端获取到了数据，并且成功的被渲染到了表格中，实际结果如图：

三、使用全局

前面的全局挂载成功后，就可以方便的使用全局了，具体的教程也不多说了，网上面很多，而且目前我使用起来并没有出现很奇怪的bug。