Vue项目导入AxiosError报错，求正确导入及运行方案

问题原因 #

你遇到的报错是因为Axios的ESM模块导出中，AxiosError并非总是作为顶层命名导出存在，不同版本的Axios导出方式有差异，同时Vite的预构建缓存也可能导致解析错误。

解决方案 #

根据你的Axios版本选择对应的导入方式：

1. 如果你使用的是Axios 0.x版本

Axios 0.x中AxiosError没有作为命名导出，需要从默认导出的axios对象中获取：

import axios, { type AxiosRequestConfig } from "axios";
// 从axios实例中提取AxiosError类
const AxiosError = axios.AxiosError;

2. 如果你使用的是Axios 1.x+版本

Axios 1.x+支持命名导出，但部分场景下Vite预构建可能无法正确识别，建议将类型导入和运行时类的获取分开：

import axios from "axios";
// 仅导入类型
import type { AxiosRequestConfig, AxiosError } from "axios";

然后在错误判断时直接使用axios.AxiosError：

if (error instanceof axios.AxiosError) {
  return error.response?.data as T;
}

3. 额外排查步骤

• 确认Axios版本：运行npm list axios查看当前版本，若版本过低建议升级到最新稳定版（npm install axios@latest）。
• 清理Vite缓存：删除项目根目录下的node_modules/.vite文件夹，重启开发服务，避免缓存导致的解析异常。

修改后的完整代码示例（Axios 1.x+） #

import axios from "axios";
import type { AxiosRequestConfig, AxiosError } from "axios";

export interface BaseRes {
  result?: string;
  data?: any;
  msg?: string;
}

const instance = axios.create({
  timeout: 3000,
});

const get = async <T extends BaseRes>(
  url: string,
  params?: any,
  config?: AxiosRequestConfig
) => {
  try {
    const res = await instance.get<T>(url, { ...config, params });
    return res.data;
  } catch (error) {
    if (error instanceof axios.AxiosError) {
      return error.response?.data as T;
    }
    throw error;
  }
};

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