在Create React App项目中配置绝对路径@符号

在开发大型React应用时，使用绝对路径导入文件可以提高代码的可读性和可维护性。本文将指导你如何在Create React App项目中配置绝对路径导入。

1. 安装 craco

首先，你需要安装 craco (Create React App Configuration Override)。打开终端并运行以下命令：

npm install --save-dev @craco/craco

或者如果你使用的是 yarn:

yarn add --dev @craco/craco

2. 配置 craco

接下来，创建一个 craco.config.js 文件在项目的根目录下，用于配置Webpack的 alias。例如：

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path'); // 引入 path 模块

module.exports = override(
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'), // 使用 path 模块来解析路径
  }),
);

这里 @ 是我们定义的一个别名，指向 src 目录。

3. 更新 package.json

确保你的 package.json 文件中的 scripts 部分使用了 craco。例如：

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

4. 使用绝对路径

现在你可以使用绝对路径来导入文件了，例如：

import request from '@utils/request';

或

import request from '@/utils/request';