Vue3+TypeScript项目中全局注册Axios失败的原因及修复方案

1. 错误原因 #

你通过app.config.globalProperties给Vue实例添加了全局的$axios，但TypeScript的类型系统默认没有这个属性的定义。Vue3组件实例的默认类型CreateComponentPublicInstance里不包含你自定义的$axios，所以TS在类型检查时会抛出“Property '$axios' does not exist”的错误——本质就是TS不认你加的全局属性。

2. 可靠修复方法 #

方法一：扩展Vue全局类型（适配Options API） #

在项目src目录下新建types/vue.d.ts文件（没有types文件夹就手动创建），添加以下类型声明：

import axios from 'axios';

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

export {};

这段代码会告诉TS：Vue组件实例上存在$axios属性，类型和导入的axios一致。保存后重启开发服务器，TS就能识别this.$axios了。

方法二：用Provide/Inject（Vue3推荐的全局注入方式） #

相比globalProperties，Provide/Inject更符合Vue3的设计理念，类型支持也更严谨：

1. 修改main.js，把axios通过provide暴露：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"

const app = createApp(App)
app.use(router)
// 替换globalProperties为provide
app.provide('$axios', axios)
app.mount('#app')

2. 在组件中通过inject获取axios：

import { defineComponent, inject } from "vue";
import env from "../env";
import MovieCard from "./MovieCard.vue";
import axios from 'axios';

export default defineComponent({
  name: "MoviesList",
  components: { MovieCard },
  props: {
    listType: {
      type: String,
      required: true,
    },
  },
  data: () => ({
    searchTerm: "",
    movies: [],
    genres: [],
  }),
  // 声明inject的类型
  inject: {
    $axios: {
      type: Object as () => typeof axios,
      required: true
    }
  },
  mounted() {
    this.listMovies();
    this.getGenres();
  },
  methods: {
    listMovies() {
      this.$axios
        .get(`${env.api_url}/movie/${this.$props.listType}?api_key=${env.api_key}`)
        .then((response) => {
          this.movies = response.data.results;
        })
        .catch((err) => console.log(err));
    },
    getGenres() {
      this.$axios
        .get(`${env.api_url}/genre/movie/list?api_key=${env.api_key}`)
        .then((response) => {
          this.genres = response.data.genres;
        })
        .catch((err) => console.log(err));
    },
  },
});

方法三：封装Axios实例并全局导入（简单直接） #

创建一个封装好的Axios实例文件src/utils/axios.ts：

import axios from 'axios';
import env from '../env';

const axiosInstance = axios.create({
  baseURL: env.api_url,
  params: {
    api_key: env.api_key
  }
});

export default axiosInstance;

之后在组件中直接导入使用，不用依赖全局注册：

// 组件中导入实例
import axiosInstance from '../utils/axios';

// 调用示例
listMovies() {
  axiosInstance
    .get(`/movie/${this.$props.listType}`)
    .then((response) => {
      this.movies = response.data.results;
    })
    .catch((err) => console.log(err));
}

这种方式不仅类型天然兼容，还能统一配置请求拦截器、baseURL等，后期维护更方便。

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