在开发大型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 path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};

这里 @ 是我们定义的一个别名,指向 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';

最后记得重新运行代码!!!