Vue3使用vue-axios发起请求报Uncaught TypeError错误如何解决

该错误核心原因是axios实例未正确注入到组件实例中，调用this.axios时实际取到的是undefined，导致axios内部合并配置逻辑抛出类型错误。

• 调整全局挂载方式（推荐，无需vue-axios依赖） #

  vue-axios本身只是对axios做了轻量封装适配Vue，你可以直接手动挂载axios避免适配问题，修改全局注册代码：

  import axios from 'axios'
  const app = createApp(App)
  // 直接挂载到全局实例属性
  app.config.globalProperties.$axios = axios
  

  对应修改组件内的调用代码：

  makeRequest() {
    console.log('Making request...')
    this.$axios.get('https://jsonplaceholder.typicode.com/users').then((response) => {
      console.log("test");
    });
  }
  

• 修复data函数语法错误 #

  你当前data返回的对象属性后使用了分号，不符合JS对象语法规范，可能引发运行时解析异常，修改为：

  data() {
    return {
      loading: true
    };
  },
  

• 调整依赖版本（上述方案无效时使用） #

  若仍报错，大概率是依赖版本不兼容，重新安装适配Vue3的稳定版本即可：

  npm uninstall axios vue-axios
  npm install axios@1.6.8 vue-axios@3.5.2
  

  安装完成后保留原this.axios调用方式即可正常运行。

内容的提问来源于stack exchange，提问作者lstangier