使用Next.js+Vitest时出现Import别名解析错误，如何解决？

出现这个错误是因为Vitest默认不识别Next.js配置的@路径别名，需要单独配置Vitest来映射这个别名，步骤如下：

1. 确认项目的别名基础配置 #

先检查你的tsconfig.json（或jsconfig.json）里的paths配置，确保已经正确定义了@的映射，示例如下：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

如果你的组件都在src目录下，paths应该改成"@/*": ["src/*"]，确保和实际目录结构对应。

2. 配置Vitest的别名解析 #

在项目根目录创建或修改vitest.config.ts（如果用JS则是vitest.config.js），添加resolve.alias配置，和tsconfig里的映射保持一致：

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      // 这里的路径要和tsconfig里的baseUrl+paths对应
      '@': path.resolve(__dirname, './'),
      // 如果是src目录下的话，改成下面这行
      // '@': path.resolve(__dirname, './src'),
    },
  },
  test: {
    environment: 'jsdom', // 适配React组件测试
    globals: true, // 可选，启用全局测试API
  },
});

3. 验证文件路径正确性 #

最后确认@/components/card/LoadingCards对应的实际文件存在：

• 检查路径是否正确（比如是不是components/card/LoadingCards.tsx或.jsx）
• 注意文件名大小写，部分系统（如Linux）对文件名大小写敏感，确保导入的名称和实际文件名完全一致

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