Vitest测试文件中src目录@路径别名无法解析如何解决

@/路径别名在测试文件中不生效，本质是两类配置没有覆盖到测试文件范围：

• Vite 中配置的 resolve.alias 默认服务于源码构建、Vite 开发服务场景，Vitest 执行测试时虽然默认会读取该配置，但如果 TS 类型解析配置没有同步覆盖测试目录，TS 会优先抛出「找不到模块」的类型错误
• 当前 tsconfig.app.json 明确排除了 vitest/**/* 目录，测试文件的类型解析走的是 tsconfig.vitest.json 配置，这份配置里没有配置对应的路径别名规则，因此触发报错。

按以下顺序调整配置即可：

1. 给测试专用TS配置补全路径别名
   打开 tsconfig.vitest.json，在 compilerOptions 中添加和 tsconfig.app.json 一致的 baseUrl 和 paths 配置：

{
  "extends": "@vue/tsconfig/tsconfig.node.json",
  "include": ["vitest/**/*", "env.d.ts"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

2. 确认根目录TS配置关联了测试配置文件
   打开根目录 tsconfig.json，确认 references 数组中包含 tsconfig.vitest.json 的引用，否则TS不会加载测试目录对应的配置规则：

{
  "files": [],
  "references": [
    {"path": "./tsconfig.app.json"},
    {"path": "./tsconfig.vite-config.json"},
    {"path": "./tsconfig.vitest.json"}
  ]
}

3. （可选）Vitest配置显式声明别名
   如果完成前两步后运行测试仍然报模块找不到的错误，可以在 vite.config.ts 的 test 配置块中显式添加别名配置，和顶层resolve的别名保持一致：

import vue from '@vitejs/plugin-vue';
import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  test: {
    include: ['./vitest/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    }
  },
});

如果配置完成后编辑器仍然飘红，但实际执行vitest run测试能正常跑通，直接重启TS服务即可：在VS Code中按Ctrl+Shift+P（macOS为Cmd+Shift+P）调出命令面板，选择TypeScript: Restart TS Server等待重载完成就会恢复正常。

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