Vue3组合式API中Axios插件报错：Module 'vue'无$axios导出成员

核心错误点1：错误的导入方式 #

你不能直接从vue模块导入$axios，因为$axios是你挂载到Vue全局实例上的自定义属性，并非Vue官方导出的成员。正确的访问方式是通过Vue实例获取。

核心错误点2：TypeScript类型未扩展 #

Vue的默认类型定义中没有$axios这个属性，所以TS会抛出类型错误，需要手动扩展Vue的全局类型。

具体解决步骤 #

1. 修正组件中$axios的访问方式 #

在组合式API组件中，通过getCurrentInstance获取Vue实例来访问$axios：

import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
const axios = instance?.appContext.config.globalProperties.$axios

如果是选项式API，直接用this.$axios即可。

2. 扩展TypeScript类型声明 #

在项目的src目录下创建一个vue.d.ts文件（已有则直接修改），添加以下内容：

import axios from 'axios'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $axios: typeof axios
  }
}

export {}

这段代码会告诉TS：Vue组件实例上存在$axios属性，类型和axios实例一致。

3. 确保TS配置识别声明文件 #

检查tsconfig.json中的include字段，确保包含了你的声明文件：

{
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

4. 确认Axios插件的注册正确性 #

建议把plugins/axios.js改为.ts后缀适配TS，确保插件正确挂载全局属性：

// plugins/axios.ts
import axios from 'axios'

export default {
  install(app) {
    const axiosInstance = axios.create({
      baseURL: '你的接口地址'
      // 其他自定义配置
    })
    app.config.globalProperties.$axios = axiosInstance
  }
}

然后在main.ts中正确注册插件：

import { createApp } from 'vue'
import App from './App.vue'
import axiosPlugin from './plugins/axios'

const app = createApp(App)
app.use(axiosPlugin)
app.mount('#app')

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