如何为Vite创建的React TypeScript项目配置@别名路径并解决报错

步骤1：补全tsconfig.json的baseUrl配置 #

paths 依赖 baseUrl 才能正确解析路径，你当前的配置缺少这个关键项，修改tsconfig.json：

"compilerOptions": {
  "baseUrl": ".", // 以项目根目录为基准路径
  "paths": {
    "@components/*": ["src/components/*"],
    "@contexts/*": ["src/contexts/*"]
  },
  // 确保include包含src目录，让TS能识别所有源码文件
  "include": ["src"]
}

步骤2：配置Vite的别名解析 #

Vite本身不会自动读取tsconfig的paths，需要在vite.config.ts中手动配置别名：

1. 先安装@types/node（可选，用于路径提示和类型支持）：

npm install @types/node --save-dev

2. 修改vite.config.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'),
      '@contexts': path.resolve(__dirname, './src/contexts'),
    },
  },
})

步骤3：重启开发服务器 #

修改配置后，必须重启Vite开发服务器，热更新不会自动加载新的别名配置。

额外检查项 #

• 确认导入路径拼写完全正确，比如@contexts/AuthContext对应的文件是否存在于src/contexts/AuthContext.ts或src/contexts/AuthContext.tsx
• 确保文件中正确导出了AuthProvider，比如export const AuthProvider = ...

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