在React项目中配置@作为路径别名
配置理由
如果没有配置别名的话每次都需要使用 ./ 或者 ../ 进行一层层的查找比较麻烦，所以配置了@别名之后直接从 @ 开始查找就行了。
配置说明
要想在 react 项目中使用 @ 当作 src/ 的别名，则需要在当前项目的根目录下新增两个配置文件，分别为：
⭐ craco.config.js：用于项目解读 @ 为 src/。
⭐ jsconfig.json：用于 vsCode 在编辑过程中输入@后自动将src下的文件目录进行自动联想提示，便于编码。
配置步骤
1. 安装插件
npm i -D @craco/craco2. 配置craco.config.js文件
在项目的根目录下新建craco.config.js文件，并写入以下内容：
const path = require('path')
module.exports = {
webpack: {
alias: {
"@": path.resolve(__dirname, 'src')
}
}
}3.更改package.json文件中scripts的配置项
"scripts": {
"start": "craco start",
"build": "craco build",
"serve": "json-server db.json --port 3004"
},4. 配置jsconfig.js文件
在项目的根目录下新建jsconfig.json文件，并写入以下内容：
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*":["src/*"]
}
}
}👉至此配置@作为别名的步骤就已经完成👈
测试配置是否成功
将项目进行重启，然后随便找个位置进行测试，如果输入@/后有路径提示则说明配置成功。
