React — react配置@路径

通常情况下，@ 路径是作为一个别名来使用，用于指向项目的根目录。这样做的好处是可以简化模块导入时的路径书写，使代码更加清晰和易读。

别名路径配置

1.路径解析配置（webpack），把@/ 解析为 src/

（1）下载插件 craco

npm i -D @craco/craco

（2）项目根目录下创建配置文件 craco.config.js （配置文件名字强制要求）

（3）配置文件中添加路径解析配置

const path = require('path')

module.exports = {
    webpack : {
        alias : { //别名配置
            '@' : path.resolve(__dirname,'src')
        }
    }
}

（4）包文件中配置启动和打包命令

2.路径联想配置（VScode），VScode在输入@/ 时，自动联想对应src/ 下的目录

（1）在根目录新建jsconfig.json文件

（2）配置

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