方案一：使用 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"]
}
}
}
