Vite+React+TS项目@pages模块找不到问题及配置疑问

1. 必须同时配置tsconfig paths和Vite alias吗？ #

是的，两者都得配置，各司其职：

• tsconfig里的paths是给TypeScript编译器用的，帮它识别别名路径，避免类型检查时报错；
• Vite的alias是给构建工具用的，打包时负责把别名映射到实际文件路径。
  缺了任何一个，要么代码编辑器飘红报错，要么打包时找不到对应文件。

2. 解决Cannot find module '@pages'的TypeScript错误 #

从你的配置和目录结构来看，问题出在tsconfig的paths规则上。你当前配置的"@pages": ["pages/*"]只支持@pages/xxx这种带后缀的导入，但你用的是import { Home } from "@pages"（直接导入pages根目录的index.ts），TypeScript找不到对应的映射规则。

修复步骤： #

（1）修改tsconfig的paths配置

给@pages添加一个不带通配符的映射规则，同时保留原有的通配符规则，这样既能支持直接导入@pages，也能支持@pages/xxx的导入方式：

"baseUrl": "./src",
"paths": {
    "@layout": ["layout/*"],
    "@pages": ["pages", "pages/*"]
}

这个配置的含义是：当你写@pages时，TypeScript会自动匹配src/pages/index.ts；写@pages/Home时，会匹配src/pages/Home目录下的文件。

（2）确认Vite配置无误

你的Vite alias配置是正确的，@pages已经指向src/pages，但要记得先导入path模块，否则会出现运行时错误：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@layout": path.resolve(__dirname, "./src/layout"),
      "@pages": path.resolve(__dirname, "./src/pages"),
    },
  },
})

（3）重启TypeScript服务

如果修改配置后编辑器仍报错，重启一下TypeScript语言服务即可（VS Code中按Ctrl+Shift+P，搜索TypeScript: Restart TS Server），让新配置生效。

验证 #

现在再使用import { Home } from "@pages"时，TypeScript就能正确识别src/pages/index.ts导出的内容，Vite打包时也能正常解析路径。

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