在React项目中配置@作为路径别名

配置理由

如果没有配置别名的话每次都需要使用 ./ 或者 ../ 进行一层层的查找比较麻烦，所以配置了@别名之后直接从 @ 开始查找就行了。

配置说明

要想在 react 项目中使用 @ 当作 src/ 的别名，则需要在当前项目的根目录下新增两个配置文件，分别为：

⭐ craco.config.js：用于项目解读 @ 为 src/。

⭐ jsconfig.json：用于 vsCode 在编辑过程中输入@后自动将src下的文件目录进行自动联想提示，便于编码。

 配置步骤

1. 安装插件

npm i -D @craco/craco

2. 配置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/*"]}}
}

👉至此配置@作为别名的步骤就已经完成👈

测试配置是否成功

将项目进行重启，然后随便找个位置进行测试，如果输入@/后有路径提示则说明配置成功。