React+TypeScript+Vite项目绝对导入编译报错问题求助

问题核心 #

你配置的Vite别名和实际使用的@/前缀不匹配，这是编译报错的直接原因。IDE能识别是因为tsconfig配置正确，但Vite编译时无法解析别名规则。

修复步骤 #

1. 修正vite.config.ts中的别名配置 #

将resolve.alias里的'/@'改为'@'，让别名匹配你使用的@/前缀：

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

export default defineConfig({
  plugins: [react()], // react插件已集成reactRefresh功能，无需单独引入
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  css: {
    modules: {
      localsConvention: 'camelCaseOnly',
    },
  },
})

注意：@vitejs/plugin-react已经包含了reactRefresh的功能，单独引入会导致冲突，直接移除即可。

2. 验证tsconfig.json配置（当前配置已正确，无需修改） #

你的tsconfig.json中baseUrl和paths配置符合要求，确保include字段包含src目录即可：

{
  "ts-node": {
    "files": true
  },
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "dist",
    "declaration": true,
    "strictNullChecks": true,
    "sourceMap": true,
    "strict": true,
    "skipLibCheck": true,
    "jsx": "react",
    "declarationDir": "types",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "allowImportingTsExtensions": true,
    "emitDeclarationOnly": true,
    "baseUrl": "src",
    "paths": {
      "@/*": [
        "*"
      ]
    }
  },
  "include": [
    "src"
  ],
  "references": [{ "path": "./tsconfig.node.json"}]
}

3. 重启Vite开发服务 #

修改配置后必须重启Vite，否则新的别名规则不会生效。

额外提示 #

如果使用ESLint，需安装eslint-import-resolver-typescript并配置.eslintrc.cjs，确保ESLint也能识别别名：

module.exports = {
  // 其他配置...
  settings: {
    'import/resolver': {
      typescript: {
        project: './tsconfig.json'
      }
    }
  }
}

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