【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. 添加路径提示配置
    在这里插入图片描述
{"compilerOptions": {"baseUrl": "./","paths": {"@/*": ["./src/*"]}}
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智慧检务大数据平台解决方案

1.1. 政务目标分析 1.1.1. 业务功能分析 为履行检察职能,人民检察院需开展职务犯罪查办和预防、刑事诉讼监督、民事行政监督、检务支持、内部管理与办公、检察队伍管理、检务保障支持等工作,分为 7 大类业务,主要功能如下: 1、…

白嫖Cloudflare Workers 搭建 Docker Hub镜像加速服务

简介 基于Cloudflare Workers 搭建 Docker Hub镜像加速服务。 首先要注册一个Cloudflare账号。 Cloudflare账号下域名的一级域名,推荐万网注册个top域名,再转移到Cloudflare,很便宜的。 注意 Worker 每天每免费账号有次数限制,…

PFA进口聚四氟乙烯量筒不易碎塑料量具

PFA量筒:也叫特氟龙量筒、耐腐蚀性量筒;低溶出与析出,主要用于生物医药、医药研发、新材料、痕量分析、同位素检测,ICP-MS/OES/AAS分析等实验。 常用规格:5ml、10ml、25ml、30ml、50ml、100ml、200ml、250ml、500ml、1000ml、2000ml等。 产品特性&#x…

【6】第一个Java程序:Hello World

一、引言 Java,作为一种广泛使用的编程语言,其强大的跨平台能力和丰富的库函数使其成为开发者的首选。对于初学者来说,编写并运行第一个Java程序是一个令人兴奋的时刻。本文将指导你使用Eclipse这一流行的集成开发环境(IDE&#…

Vue基础面试题(二)

文章目录 1.Vue 单页应用与多页应用的区别2.Vue template 到 render 的过程3. Vue data 中某一个属性的值发生改变后,视图会立即同步执行重新渲染吗?4.Vue的优点5.vue如何监听对象或者数组某个属性的变化6.Vue模版编译原理7. 对SSR的理解8.Vue的性能优化…

实验五 网络中的树

文章目录 5.1 网络中的树第一关 认识树相关知识编程要求代码文件 第2关 根节点的二阶邻居求解方法相关知识编程要求代码文件 第3关 根节点的n阶邻居求解方法相关知识 5.2 权值矩阵与环(无向网络)第1关 无向网络的权值矩阵相关知识编程要求代码文件 第2关…

【机器学习】神经网络与深度学习:探索智能计算的前沿

前沿 神经网络:模拟人类神经系统的计算模型 基本概念 神经网络,又称人工神经网络(ANN, Artificial Neural Network),是一种模拟人类神经系统结构和功能的计算模型。它由大量神经元(节点)相互连…

docker环境中配置phpstorm php xdebug调试工具

本文介绍通过docker compose的使用方式 第一步:在php镜像中安装phpxdebug扩展,比如php7.4对应的是xdebug3.1.6 第二步:设置项目中的docker-compose.yml docker-compose 增加开启xdebug的环境变量,host.docker.internal是宿主机的地址&#…

Kettle根据分类实现Excel文件拆分——kettle开发31

将整理好的一份供应商付款明细Excel文件,按供应商拆分成多个Excel文件。 实现思路 本文我们首先将供应商付款明细表,按照“名称”拆分成多份Excel文件。拆分Excel文件打算用两个转换实现,一个用来将Excel数据读取到参数中,另外一…

Internet Download Manager(IDM6.41)安装教程+软件安装包下载

IDM是一款多线程下载工具,全称InternetDownloadManager。IDM的多线程加速功能,能够充分利用宽带,所以下载速度会比较快,而且它支持断点续传。它的网站音视频捕获、站点抓取、静默下载等功能,也特别实用。 安 装 包 获 …

图像的几何变换之平移

文章目录 前言需求代码运行结果图 前言 图像的几何变换是一个再基础不过的知识点,包括等距变换,相似变换,仿射变换和投影变换。图像的几何变换是指对图像的位置,尺寸,大小,形状和投影进行变换,…

采集设置记录

采集设置: 1.任务添加 2.采集器设置 采集器设置之规则采集

OpenCV滤波器

滤波的作用 一副图像通过滤波器得到另一副图像;其中滤波器又称为卷积核,滤波的过程称为卷积。 图像卷积效果图 卷积的过程 一 卷积的几个基本概念 1 卷积核的大小 卷积核一般为奇数,如3X3,5X5,7X7等。 一方面是增加padding的原因。 另一…

activiti(一)-相关概述及相关表的定义

官网 1、概述 Activiti 是一个开源的、以 Java 为中心的业务流程管理(BPM)平台,旨在帮助企业自动化和管理复杂的业务流程。其核心功能包括工作流管理、任务分配、事件处理、流程监控和集成等。 1.1、主要功能和特点 流程设计和建模&#…

GaussDB技术解读——GaussDB架构介绍(三)

目录 9 智能关键技术方案 智能关键技术一:自治运维系统 智能关键技术二:库内AI引擎 智能关键技术三:智能优化器 10 驱动接口关键技术方案 GaussDB架构介绍(二)从数据持久化存取层(DataNode)关键技术方案、全局事…

Druid未授权访问漏洞修复

前言 安全组针对系统漏扫发现系统存在Druid未授权访问,会引发泄露系统敏感信息,漏洞链接为ip:端口/druid/index.html,可以清楚的查看数据库的相关连接信息,如下图所示: 漏洞修复 1、关闭Druid监控页面 在Druid的配…

右值引用和移动语义

什么是左值?什么是右值? 通俗来讲,可以出现在赋值语句左侧的,为左值;只能出现在赋值语句右侧的,为右值。 左值与右值的本质区别在于:左值能取地址,但右值不能。 本文主要通过三个场景…

使用星鸾云GPU云服务器搭配Jupyter Lab,创建个人AI大模型

最近我们公司IT部门宣布了一个大事情,他们开发了一款内部用的大模型,叫作一号AI员工(其实就是一个聊天机器人),这个一号员工可以回答所有关于公司财务、人事、制度、产品方面的问题。 我问了句:公司加班有…

GMT6绘制北半球

设置绘制区域及投影方式 投影方式选择立体等角投影,在GMT6中的命令是-Js # 定义区域变量和投影变量,纬度从北纬30度到极点 region-180/180/30/90 projection0/90/1:60000000 gmt set PROJ_ELLIPSOID WGS-84定义CPT及地形展示 现在定义一个CPT用于显示…

欧式家居官网源码系统-轻奢大气设计风格

一款家居家私的官方网站系统,设计轻奢大气。 前端内容均可通过后台修改。当然你也可以用于其他行业的官网使用,只要你喜欢这个设计。 大致功能: 1、会员系统 2、支付功能 3、标签功能 4、熊掌号提交功能 5、文章发布功能 6、SEO设置功能 7、多…