如何为新创建的Create React App项目添加导入别名（Alias）

云上老周

2026-5-26

我太懂你这种找不到配置文件的烦恼了！用create-react-app新建的项目默认会把webpack和babel的配置隐藏起来，不过有两种靠谱的方式来设置路径别名，我给你一步步拆解清楚：

方法一：使用 Craco（推荐，无需暴露配置）

Craco 是专门用来覆盖 create-react-app 默认配置的工具，不用 eject 就能修改 webpack 配置，完全不会破坏官方的项目结构，步骤超简单：

安装 Craco
打开终端，在项目根目录运行：

npm install @craco/craco --save-dev
# 或者用 yarn
yarn add @craco/craco --dev

替换 package.json 的启动脚本
把原来的 start、build、test 命令替换成 Craco 提供的命令：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }
}

创建 Craco 配置文件
在项目根目录新建 craco.config.js，添加你的别名配置：

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@uicomponents': path.resolve(__dirname, 'src/hello/this/is/the/path/to/ui/components')
      // 还可以按需添加其他别名，比如：
      // '@utils': path.resolve(__dirname, 'src/utils')
    }
  }
};

配置编辑器识别别名（可选但关键）
为了让 VS Code 这类编辑器不把别名标红、能正常跳转，需要在项目根目录创建对应配置文件：

若为 JavaScript 项目，新建 jsconfig.json：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@uicomponents/*": ["hello/this/is/the/path/to/ui/components/*"]
    }
  },
  "include": ["src"]
}

若为 TypeScript 项目，修改现有 tsconfig.json 的 compilerOptions：

{
  "compilerOptions": {
    // 保留原有配置...
    "baseUrl": "src",
    "paths": {
      "@uicomponents/*": ["hello/this/is/the/path/to/ui/components/*"]
    }
  },
  "include": ["src"]
}

重启开发服务器
关掉当前运行的开发服务器，重新执行 npm start 或 yarn start，现在你就能用 import { Header } from '@uicomponents' 轻松导入组件啦！

方法二：Eject 暴露配置（不推荐）

如果你实在不想用第三方工具，可以用官方的 eject 命令把所有配置文件暴露出来，但这个操作不可逆，一旦执行就没法回到原来的隐式配置状态，后续维护成本会很高，谨慎选择：

执行 eject 命令
在终端运行：

npm run eject
# 或者 yarn eject

执行后项目根目录会生成 webpack.config.js、babel.config.js 等一堆配置文件。

修改 webpack 配置的 alias
打开 webpack.config.js，找到 resolve.alias 区域（大概在文件中间位置），添加你的别名：

resolve: {
  alias: {
    // 保留原有别名...
    '@uicomponents': path.resolve(__dirname, 'src/hello/this/is/the/path/to/ui/components')
  }
}

配置编辑器识别
和方法一一样，配置 jsconfig.json 或 tsconfig.json，然后重启开发服务器即可生效。

小贴士：优先选 Craco 方案，eject 后你需要自己维护所有 webpack 和 babel 配置，后续 create-react-app 官方更新时，你没法直接同步享受新特性，会增加不少工作量。

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