React-配置别名@

1.概念

说明:路径解析配置(webpack),把@/解析为src/;路径联想配置(VsCode),VsCode在输入@/时,自动联想出来对应的src/下的子级目录。CRA本身把webpacki配置包装到了黑盒里无法直接修改,需要借助一个插件-craco。

2.实现步骤

2.1安装craco

npm i -D @craco/craco

2.2配置文件

说明:项目根目录下创建配置文件craco.config.js

javascript 复制代码
const path=require('path')

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

2.3配置启动

说明:包文件中配置启动和打包命令。

2.4联想路径配置

说明: VsCode的联想配置,需要我们在项目目录下添加jsconfig,json文件,加入配置之后VsCode会自动读取配置帮助我们自动联想提示。

javascript 复制代码
{
    "compilerOptions": {
        "baseUrl":"./",
        "paths":{
            "@/*":[
                "src/*"
                ]
        }
    }
}
相关推荐
whysqwhw1 分钟前
Hippy 跨平台框架扩展原生自定义组件
前端
OEC小胖胖4 分钟前
页面间的导航:`<Link>` 组件和 `useRouter`
前端·前端框架·web·next.js
faimi39 分钟前
🚀程序员必收藏!最全Git命令手册:解决90%团队协作难题
前端·gitlab
coooliang1 小时前
【鸿蒙 NEXT】V1迁移V2状态管理
java·前端·harmonyos
程序员码歌1 小时前
零代码AI编程实战-热搜从0到1技术方案
前端·ai编程·cursor
kk不中嘞2 小时前
浅谈前端框架
前端·vue.js·react.js·前端框架
服务端技术栈2 小时前
历时 1 个多月,我的第一个微信小程序「图片转 Excel」终于上线了!
前端·后端·微信小程序
一个很老的小萌新2 小时前
json 解析 [{“id“:1,“name“:“apple“},{“id“:2,“name“:“banana“}]
java·前端·json
yanlele2 小时前
前端面试第 78 期 - 2025.09.07 更新 Nginx 专题面试总结(12 道题)
前端·javascript·面试
影子信息3 小时前
el-tree 点击父节点无效,只能选中子节点
前端·javascript·vue.js