方案一：使用 craco 库

1、下载craco依赖

npm i @craco/craco -D

2、在跟路径创建文件craco.config.js，和package.json同级

my-app
├── node_modules
├── craco.config.js
└── package.json

3、配置craco.config.js文件

const path = require("path");

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

4、修改package.json文件

"scripts": {
  //"start": "react-scripts start", // 删除
  //"build": "react-scripts build",// 删除
  //"test": "react-scripts test",// 删除
  "start": "craco start", // 添加
   "build": "craco build"// 添加
   "test": "craco test"// 添加
}

方案二：配置webpack.config.js

1、打开配置文件
默认情况下，react脚手架搭建的项目配置文件都是隐藏的，我们首先需要打开它，进行自定义设置。

npm run eject

执行上面命令后，js文件会报错，可以删除package.json里的babel

image.png

image.png

2.配置webpack.config.js文件,在alias中配置

image.png

@别名路径提示及Ctrl健检索

1、在项目根目录创建 jsconfig.json 配置文件

2、在配置文件中添加以下配置

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