【React】配置别名路径@

别名路径配置

在这里插入图片描述

1. 路径解析配置(webpack)

CRA本身把webpack配置包装到了黑盒里无法直接修改,需要借助一个插件 - craco

步骤

在这里插入图片描述

  1. 安装craco
npm i -D @craco/craco
  1. 项目根目录下创建配置文件 craco.config.js
  2. 配置文件中添加路径解析配置
    在这里插入图片描述
const path = require('path')
module.exports = {
  // webpack配置
  webpack:{
    // 配置别名
    alias:{
      // 约定: 使用 @ 表示 src文件所在路径
      '@':path.resolve(__dirname,'src')
    }
  }
}
  1. 包文件package.json 中 配置启动和打包命令
    在这里插入图片描述
    在这里插入图片描述
  2. 启动项目 ,执行 npm run start

2. 路径联想配置(VsCode)

 VsCode的联想配置,需要我们在项目目录下添加 jsconfig.json 文件,
 加入配置之后VsCode会自动读取配置帮助我们自动联想提示
步骤
  1. 根目录下新增配置文件 jsconfig.json
  2. 添加路径提示配置
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/704669.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

无法在地址[localhost]和端口[8005]上创建服务器关闭套接字(基本端口[8005]和偏移量[0])

今天小伙伴问我一个问题,说是新服务器启动应用,报了一个错误,如下: 一开始我怀疑是端口被占用 经过排查端口没有被占用,然后我怀疑localhost解析有问题 经过 ping localhost 后,得到以下结果到这里很明…

基于若依的ruoyi-nbcio-plus里抄送人多页选择人员的bug修复

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码: h…

阿里云香港服务器怎么样?

大家都知道阿里云是国内最受欢迎的云服务商,那么阿里云香港服务器究竟怎么样呢?和硅云的香港服务器用于做外贸网站等业务相比各有哪些优缺点呢? 阿里云和硅云在香港云服务领域有着广泛的应用和良好的口碑。然而,它们各自的特点和…

短剧cps平台有哪些,短剧cps系统搭建

一、短剧CPS平台主要包括以下几个: 1,快手平台 拥有庞大的用户基础和活跃的短剧消费群体,通过快手的推广,短剧可以获得更多的曝光。同时,快手还提供CPS分佣模式。 2,抖音平台 作为国内最大的短视频平台…

我国的AI大模型前景如何?

目前,我国的AI大模型市场前景很好。这个产业的发展源于多领域的广泛需求,包括办公、制造、金融、医疗、政务等场景中的降本增效、生产自动化、降低风险、提高诊断准确率、提高政务服务效率等诉求。这些领域的创新和发展共同推动了我国AI大模型产业的蓬勃…

CentOS7服务器中安装openCV4.8的教程

参考链接:Centos7环境下cmake3.25的编译与安装 参考链接:Linux安装或者升级cmake,例子为v3.10.2升级到v3.25.0(自己指定版本) 参考链接:Linux安装Opencv(C) 一、下载资源 1.下载cmake3.25.0的压缩包&am…

zerotier自建moon方法

简介 使用zerotier已经有一段时间了,现在偶尔会出现服务器连接不上的情况。我就想自己建个moon来试试。记录一下过程,用作备忘录。 准备工作 准备一个有公网IP的云主机。我用的是“三丰云”,速度很快同时提供"免费虚拟主机"和“免费…

第17章通信系统架构设计理论与实践

常见的5种常用的网络架构和构建网络的相关技术,以及网络构建的分析和设计方法。 17.1通信系统概述 通信技术和网络技术的发展,通信网络发生很大变化,入网的形式变化,传输的速率的提高、接入网络的方式多样化、网络结构的更为复杂…

“中国第一慢病医疗平台”冲刺港股IPO,方舟云康如何脱颖而出?

“中国第一线上慢性病管理平台”--方舟云康,6月10日通过了港交所聆讯,预计将在香港主板IPO上市。 作为一家2015年成立的互联网医疗企业,方舟云康此前分别在2022年11月、2023年6月、2024年2月三次递表。从最初的坚持数智化管理模式&#xff0…

如何通俗并尽可能详细地解释卡尔曼滤波?

参考书 射影定理 递推射影公式 关于线性流型 source: 线性流型_百度百科 后续再更。

服务器数据恢复—EMC Isilon存储中被误删的虚拟机数据恢复案例

服务器存储数据恢复环境: EMC Isilon S200集群存储,共三个节点,每节点配置12块SATA硬盘。 服务器存储故障: 工作人员误操作删除虚拟机,虚拟机中数据包括数据库、MP4、AS、TS类型的视频文件等。需要恢复数据的虚拟机通…

中心极限定理的MATLAB例

独立同分布的中心极限定理: 设 X 1 , X 2 , … , X n X_1, X_2, \ldots, X_n X1​,X2​,…,Xn​ 是独立同分布的随机变量序列,且 E ( X i ) μ E(X_i) \mu E(Xi​)μ, D ( X i ) σ 2 > 0 D(X_i) \sigma^2 > 0 D(Xi​)σ2>0&a…

收藏一些毕业论文技术路线图

*信息来源:xhs 立青Jill 原文链接https://mp.weixin.qq.com/s?__bizMzUyNzczMTI4Mg&mid2247693272&idx3&snf6c8513eaee894c5158dc5c3620bf93c&chksmfa76ace5cd0125f3169b2782c137f6308c6d201d3a845db1be8b397758a1f11e3719524e601b&token18515…

九种常见可视化大屏入场动效,绝对足够惊艳。

Hi,10经验的前端开发和UI设计老司机→贝格前端工场,为您分享。本期带来一批可视化大屏的入场动效,这种效果绝对是先声夺人,惊艳无数人。 在可视化大屏中,入场动画是非常重要的,可以通过各种形式的动画效果…

基于WPF技术的换热站智能监控系统07--实现左侧数据报表

1、区域划分 2、UI布局 LiveCharts是一个比较漂亮的WPF图表控件,在数据变化时还会有动画切换的效果,并且样式也可以控制。 Values:数据值 Fill:填充颜色 StrokeThickness:粗细 LabelPosition:标签位置 3、运行效果 走过路过不…

额定值高于 1 kW 的电机驱动应用使用 GaN 逆变器 IC

GaN 技术的三个重要的参数是更高的带隙、临界场和电子迁移率。当这些参数结合起来时,由于 GaN 晶体的临界场高 10 倍,因此与硅 MOSFET 相比,电端子之间的距离可以近 10 倍。这导致了 GaN 和硅之间的明显区别:中压 GaN 器件可以基于…

Python 最强的5个高级函数,你会几个?

Python是一门灵活而强大的编程语言,具有丰富的内置函数和库。今天,我们将深入探讨五个非常有用的Python高级函数。这些函数不仅能够简化代码,还能提高代码的可读性和可维护性。 首先,了解下什么是高级函数? 高级函数…

SpringBoot不用写Controller、不用写Service、不用建表,直接起飞是什么感觉

Spring Data REST 提供了一种简单的方式来暴露 JPA 实体为 RESTful 服务,这使得构建基于 REST 的数据服务变得非常快速和高效。下面是一个使用 Spring Data REST 构建通用架构的基本示例: 首先,我们需要创建一个实体类(例如&…

【Unity】Inspector排版扩展学习初探

一、简单的Unity Inspector扩展 [SerializeField] [SerializeField] 作用:让private属性也可以显示在面板上 [Range(x , y)] [Range(x , y)] 作用: 让参数从输入框变为范围滑条 [Header(" 标题 ")] [Header(" 标题 ")]作用&am…

为什么说指针是c语言的灵魂?

指针,是一个让c语言初学者颤抖的坎。 为什么说指针是c语言的灵魂? 因为它提供了对内存的直接控制能力,这是C语言和其它高级编程语言的关键特点之一。 基于这个特点,能衍生出非常多灵活的应用,比如内存管理、数组操作、…