解决Vite+React项目中VSCode无法识别路径别名的问题

你的问题核心是TypeScript配置的paths只覆盖了带通配符/*的别名导入，没处理直接导入别名本身的情况——比如@store这种不带后缀的导入，而Vite的alias支持两种场景，所以编译正常但VSCode的TS语言服务报错。

修复步骤： #

1. 完善tsconfig.app.json的paths配置 #

在paths里补充不带/*的别名映射，让TS能识别直接导入别名的场景：

"paths": {
  "@/*": ["*"],
  "@assets/*": ["assets/*"],
  "@assets": ["assets"],
  "@core/*": ["core/*"],
  "@core": ["core"],
  "@store/*": ["core/store/*"],
  "@store": ["core/store"], // 新增这行，匹配直接导入@store的情况
  "@user/*": ["user/*"],
  "@user": ["user"]
}

如果core/store目录下有index.ts文件，TS会自动解析到这个入口文件，和Vite的行为保持一致。

2. 确保VSCode使用项目本地的TypeScript版本 #

VSCode默认可能用全局TS版本，和项目依赖版本不一致会导致识别问题：

• 点击VSCode底部状态栏的TS版本号（比如4.9.5）
• 选择"Use Workspace Version"，切换为项目node_modules里的TS版本

3. 重启TS语言服务或VSCode窗口 #

修改配置后，按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入TypeScript: Restart TS Server重启语言服务；或者直接重启VSCode，让配置完全生效。

额外检查点： #

如果项目根目录存在tsconfig.json，要确保它继承了tsconfig.app.json的配置——有些Vite模板会把配置拆分，根目录的tsconfig.json作为总入口，示例如下：

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

保证VSCode能正确读取到包含paths的配置文件。

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