1.说明

在react项目中想要使用@代替“src/”需要在项目根目录下配置两个文件，craco.config.js和sconfig.json；

craco.config.js配置文件是用于项目解读@为“src/”

jsconfig.json配置文件是用于vsCode在编辑过程是输入@后可以将src下的文件目录进行自动联想提示，便于编码

2.安装插件

npm i -D @craco/craco

3.配置craco.config.js

在根目录下新建craco.config.js文件

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

更改package.json配置项

"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": "react-scripts test","eject": "react-scripts eject"},

4.配置jsconfig.json

在根目录下新建jsconfig.json文件

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

5.测试

重新启动项目，运行命令不用变