React+TS+Vite项目引入Header组件报错，求助解决方案

核心原因 #

你的tsconfig.json中paths配置的路径映射有误。baseUrl设为当前根目录，但@layouts/*映射的是根目录下的layouts/*，而实际你的layouts目录位于src文件夹内，导致Vite无法找到对应文件。

解决方案 #

1. 修正tsconfig.json的paths映射 #

打开tsconfig.json，将所有组件/页面相关的路径映射加上src/前缀：

{
  "compilerOptions": {
    // ...其他配置
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["src/components/*"],
      "@layouts/*": ["src/layouts/*"],
      "@pages/*": ["src/pages/*"],
      "@utils/*": ["src/utils/*"],
      "@typings/*": ["src/typings/*"]
    },
    // ...其他配置
  }
}

2. 确认目录结构 #

确保你的项目目录结构符合预期，Header组件的路径应为：

src/
├── layouts/
│   └── Header/
│       └── index.tsx
├── pages/
│   └── Group/
│       └── index.tsx
└── App.tsx

3. 重启Vite开发服务器 #

修改配置后，必须重启Vite服务，让vite-tsconfig-paths插件重新加载更新后的路径映射规则。

完成以上步骤后，@layouts/Header的导入即可正常解析，Group页面也能正确渲染Header组件。

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