在 React 中，我们不能直接使用 @ 去表示 src 文件夹，需要额外的配置

1, 安装craco工具包

    这个工具包是专门在(cra-Create React App环境下扩展webpack 的一个工具包!

npm i @craco/craco -D

2，增加 craco.config.js 配置文件(项目根目录下增加)

const path = require('path');
module.exports = {
    // 以下是webpack的配置信息
    webpack: {
      // 配置别名
      alias: {
        '@': path.resolve(__dirname, 'src')
        // 约定使用 @ 表示 src 文件所在目录
      }
    }
  };

3,  修改package.json的script命令

//原来
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
 //修改后：
 "scripts": {
    "start": "craco start",
    "build": "craco  build",
    "test": "craco  test",
    "eject": "craco  eject"
  }

    修改完之后，记得修改项目

4, 路径联想配置（VScode），VScode在输入@/ 时，自动联想对应src/ 下的目录

（1）在根目录新建jsconfig.json文件

（2）配置

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*" :["src/*"]
        }
    }
}