Vue 3 Options API中Provide/Inject注入Axios报错排查

• 检查main.js中provide的顺序和正确性
  必须确保app.provide在app.mount之前调用，同时确认axios实例已正确导入或创建：

  // main.js 正确写法示例
  import { createApp } from 'vue'
  import App from './App.vue'
  import axios from 'axios'
  
  // 推荐：创建自定义axios实例（可配置baseURL、拦截器等）
  const axiosInstance = axios.create({
    baseURL: '/api'
  })
  
  const app = createApp(App)
  app.provide('axios', axiosInstance) // 先执行provide再挂载
  app.mount('#app')
  

  若先执行app.mount再调用app.provide，根组件及所有子组件都无法获取到注入的值。

• 确认子组件中inject的使用时机
  不要在data选项中直接调用this.axios——data的执行时机早于inject属性的注入，此时this.axios还未初始化。应在created、mounted等生命周期钩子中调用：

  // 子组件正确写法示例
  export default {
    inject: ['axios'],
    data() {
      return {
        userData: { name: 'test', email: 'test@example.com' }
      }
    },
    mounted() {
      this.axios.post('/users', this.userData)
        .then(res => console.log('请求成功:', res))
        .catch(err => console.error('请求失败:', err))
    }
  }
  

• 验证axios实例的有效性
  在main.js中打印axios实例，确认它不是undefined：

  console.log(axiosInstance) // 检查输出是否为包含post、get等方法的axios实例对象
  

  如果输出undefined，先检查是否已安装axios（执行npm install axios），再确认导入语句是否正确——axios是默认导出，不要写成import { axios } from 'axios'。

• 检查组件挂载范围
  确保报错的子组件是挂载在app.mount('#app')对应的DOM节点下的组件。如果组件是通过独立挂载（比如createApp(Child).mount('#other-dom')），它不在根app的provide范围内，自然无法获取到注入的axios。

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