Vite+TypeScript+React路径别名配置后VSCode报模块找不到错误

你的项目能正常运行说明Vite的别名配置没问题，VSCode的报错是因为TypeScript没有正确读取到路径别名配置，结合你提供的配置文件，问题出在根tsconfig.json的结构和子配置的继承关系上，以下是具体解决步骤：

1. 修正tsconfig.app.json配置 #

由于你用了TypeScript的项目引用（references），根tsconfig.json是作为"解决方案配置"存在的，实际编译应用代码时会使用tsconfig.app.json，所以需要确保路径别名配置被应用到这个子配置中：

方案A：让子配置继承根配置 #

修改tsconfig.app.json，添加extends字段继承根配置的compilerOptions：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "jsx": "react-jsx",
    "module": "ESNext",
    "target": "ES2020",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src"]
}

方案B：直接在子配置中添加路径别名 #

如果不想继承根配置，直接在tsconfig.app.json的compilerOptions里添加baseUrl和paths：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "jsx": "react-jsx",
    "module": "ESNext",
    "target": "ES2020",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src"]
}

2. 让VSCode识别正确的配置文件 #

打开VSCode命令面板（Ctrl+Shift+P），运行TypeScript: Select TypeScript Configuration File，选择tsconfig.app.json或者根tsconfig.json，然后再运行TypeScript: Restart TS Server。

3. 兜底排查（如果以上步骤无效） #

• 删除项目根目录的node_modules文件夹和package-lock.json/yarn.lock文件，重新执行npm install或yarn install
• 完全关闭VSCode后重新打开项目

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