React中配置@路径别名及解决组件导入失败问题

AI 小北

2026-7-19

解决@路径映射无法解析的问题

1. 修复TypeScript配置的扫描范围

你的tsconfig.json中include字段仅包含typings.d.ts，导致TypeScript未扫描src目录下的文件，路径映射规则无法生效。更新include字段：

"include": ["typings.d.ts", "src/**/*"]

2. 同步构建工具的路径别名配置

TypeScript的paths仅用于类型检查，实际打包时需要构建工具同步配置别名，以下是不同工具的配置方式：

若使用Create React App（CRA）

CRA默认不支持自定义路径别名，需借助react-app-rewired和customize-cra修改配置：

安装依赖：

npm install react-app-rewired customize-cra --save-dev

在项目根目录创建config-overrides.js：

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
    '@public': path.resolve(__dirname, 'public')
  })
);

修改package.json中的脚本命令：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

若使用Vite

在vite.config.ts中添加别名配置：

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'),
      '@public': path.resolve(__dirname, './public')
    }
  }
});

若使用自定义Webpack配置

在webpack.config.js的resolve字段中添加别名：

const path = require('path');

module.exports = {
  // 其他配置项
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@public': path.resolve(__dirname, 'public')
    }
  }
};

3. 验证文件路径与大小写

确认Container组件的实际路径为src/components/container/Container.tsx（或.jsx），且文件名大小写与导入语句完全匹配（你的配置启用了forceConsistentCasingInFileNames: true，大小写不匹配会导致解析失败）。