配置TypeScript与Vite别名后执行npm run build报错求助

问题分析 #

构建报错的核心原因是Vite的别名配置与TypeScript的paths规则不匹配，同时路径解析逻辑不一致，导致构建阶段无法正确定位组件文件。

修复步骤 #

1. 统一Vite别名配置，匹配TypeScript通配符规则

修改vite.config.ts，将别名改为带通配符的格式，同时统一用path.resolve确保绝对路径解析准确：

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      'screens/*': path.resolve(__dirname, './src/screens/*'),
      'components/*': path.resolve(__dirname, './src/components/*'),
    }
  }
})

2. 确认TypeScript配置的正确性

检查tsconfig.json的compilerOptions部分，确保baseUrl和paths配置无语法错误：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "screens/*": ["./src/screens/*"],
      "components/*": ["./src/components/*"]
    },
    // 其他TypeScript配置项
  }
}

3. 验证导入语句格式

确保src/screens/Home.tsx中的导入使用正确的别名格式：

// 正确写法
import MainTable from 'components/tables/MainTable';

4. 检查文件实际状态

确认src/components/tables/MainTable.tsx（或.ts）文件真实存在，同时注意文件名大小写——Windows开发环境不区分大小写，但构建过程中可能因大小写不匹配触发找不到文件的错误。

5. 清除缓存后重新构建

如果以上步骤完成后仍有问题，执行带清缓存参数的构建命令：

npm run build -- --clearCache

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