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/*"] } } }