React Vite(TypeScript)项目配置绝对路径后编译失败求助

1. 对齐tsconfig.json与vite.config.ts的映射配置 #

先确认tsconfig.json的路径映射是否正确，示例配置：

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "components/*": ["components/*"],
      "@/*": ["*"] // 可选，用@作为src根目录的别名
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

对应配置vite.config.ts的别名，必须用path.resolve生成绝对路径，保证与TS配置完全匹配：

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      'components': path.resolve(__dirname, './src/components'),
      '@': path.resolve(__dirname, './src') // 对应@/*的路径映射
    }
  }
});

若tsconfig中用了components/*这种通配符格式，Vite的别名也可写成'components/*': path.resolve(__dirname, './src/components/*')，核心是保持映射逻辑一致。

2. 清理缓存并重启TS服务 #

• 删除项目根目录下的node_modules/.cache文件夹（清除Vite编译缓存）
• 重启VS Code的TypeScript服务：按下Ctrl+Shift+P（Windows）/Cmd+Shift+P（Mac），输入TypeScript: Restart TS Server执行
• 可选：删除根目录下的tsconfig.tsbuildinfo文件（清除TS构建缓存）

3. 检查TS配置文件的有效性 #

• 确保项目使用的是主tsconfig.json，而非tsconfig.node.json（后者仅用于Vite的Node端配置）
• 确认tsconfig.json的include字段包含src下所有文件，避免TS编译器忽略目标目录

4. 规范导入路径写法 #

导入时可省略.tsx后缀（TS和Vite会自动识别），示例：

import Menu from "components/Menu";

若要保留后缀，需保证路径大小写与实际文件完全一致（TS编译器严格区分大小写）

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