Vitest别名导入异常：Storybook+单元测试配置报错

以下是针对该问题的具体排查和解决步骤：

• 确认依赖安装正确
  确保安装的是Vitest官方适配的路径解析插件，执行对应包管理器的安装命令：

  # npm
  npm install -D @vitest/tsconfig-paths
  # yarn
  yarn add -D @vitest/tsconfig-paths
  # pnpm
  pnpm add -D @vitest/tsconfig-paths
  

• 检查vitest.config.ts的插件配置
  必须在配置文件中正确导入并启用tsconfigPaths插件，若主tsconfig文件不在项目根目录，需手动指定路径：

  import { defineConfig } from 'vitest/config'
  import tsconfigPaths from '@vitest/tsconfig-paths'
  
  export default defineConfig({
    plugins: [tsconfigPaths()],
    // 若主tsconfig不在根目录，取消注释并修改路径
    // tsconfigFile: './src/tsconfig.json',
    test: {
      // 你的其他测试配置项
    }
  })
  

• 验证tsconfig.json的paths配置
  确保baseUrl和paths配置匹配项目结构，paths是基于baseUrl的相对路径：

  {
    "compilerOptions": {
      "baseUrl": ".", // 必须设置，paths依赖此基准路径
      "paths": {
        "@/*": ["src/*"] // 替换为你的实际源码目录
      }
    }
  }
  

• 排查多tsconfig文件冲突
  若项目中存在多个tsconfig文件（如tsconfig.json和tsconfig.node.json），Vitest可能默认读取tsconfig.node.json，此时需在vitest.config中明确指定tsconfigFile为你的主配置文件路径。

• 清除Vitest缓存
  缓存可能导致配置未生效，执行命令清除后重新运行测试：

  npx vitest --clearCache
  

• 兜底方案：手动配置别名
  若上述方法无效，可直接在vitest.config中手动配置resolve.alias：

  import { defineConfig } from 'vitest/config'
  import { resolve } from 'path'
  
  export default defineConfig({
    resolve: {
      alias: {
        '@': resolve(__dirname, './src')
      }
    },
    test: {
      // 你的其他测试配置
    }
  })
  

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