如何解决Vue3+TS+Vite在VSCode中的路径别名类型报错问题

以下是针对问题的具体解决步骤：

1. 修正tsconfig.json的路径映射配置 #

确保compilerOptions里的baseUrl和paths配置准确，这是TypeScript解析别名的核心：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"] // 这里的别名要和你项目中实际使用的一致，比如@指向src目录
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
  },
  "references": [{ "path": "./tsconfig.node.json" }]
}

注意：include必须覆盖所有需要TypeScript解析的文件，包括你的接口、类型定义文件。

2. 确认Volar接管模式完全生效 #

虽然你已经禁用了内置TS服务，但需确保Volar接管模式配置到位，在VSCode的settings.json中添加：

{
  "typescript.enablePromptUseWorkspaceTsdk": false,
  "typescript.tsdk": "./node_modules/typescript/lib",
  "volar.tsPlugin": true,
  "volar.tsPluginStatus": "running"
}

配置完成后重启VSCode窗口，确保Volar完全接管TS语言服务。

3. 同步vitest配置文件的路径设置 #

你的tsconfig.vitest.json需要继承主tsconfig.json的配置，避免路径映射不一致：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "types": ["vitest/globals"]
  },
  "include": ["src/**/*.ts", "src/**/*.vue", "tests/**/*.ts"]
}

这样运行vue-tsc --noEmit -p tsconfig.vitest.json --composite false时，就能正确识别别名导入。

4. 移除多余的shim文件 #

之前添加的针对别名的shim文件（比如declare module '@/*'）请直接删除——TypeScript通过paths即可解析别名，额外的模块声明会导致类型冲突，反而引发错误。

5. 清除缓存并重启 #

• 执行rm -rf node_modules/.cache（Windows下删除node_modules\.cache文件夹）清除项目缓存
• 按下Ctrl+Shift+P（Windows）/Cmd+Shift+P（Mac），选择"TypeScript: Restart TS Server"
• 重启VSCode窗口

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