React + Vite项目别名配置
- Node版本:v20.16.0
- Vite版本:5.4.1
-
安装
@types/node
依赖包pnpm i @types/node -D pnpm ls @types/node
-
配置
vite.config.js
文件:resolve: {alias: {"@": join(__dirname, "./src/"),}, },
-
使用配置好的别名
@
:
由上图我们发现,我们虽然配置了别名,但是vscode并没有给出提示,那就意味着别名没有生效。 -
解决方案:
因为使用Vite
创建的React
项目,并没有生成jsconfig.json
文件。因此我们需要手动创建jsconfig.json
文件,添加如下配置:{"compilerOptions": {"baseUrl": "./","paths": {"@/*": ["src/*"],}},"include": ["src"],"exclude": ["node_modules", "dist"] }
此时,再导入组件使用@时,就会有提示了,如图:
-
知识拓展:
-
配置别名,实际有两种写法:
alias配置官方文档:https://cn.vitejs.dev/config/shared-options#resolve-alias
-
对象形式:Record<string, string>
resolve: {alias: {'@': join(__dirname, '/src/')}},
-
数组形式:Array<{ find: string | RegExp, replacement: string, customResolver?: ResolverFunction | ResolverObject }>
resolve: {alias: [{find: '@',replacement: join(__dirname, '/src/')}]},
-
-
相关文章:

React + Vite项目别名配置
Node版本:v20.16.0Vite版本:5.4.1 安装 types/node 依赖包 pnpm i types/node -D pnpm ls types/node配置 vite.config.js 文件: resolve: {alias: {"": join(__dirname, "./src/"),}, },使用配置好的别名 : 由上图我们…...
FFmpeg编译与配置 - Linux环境
Linux环境配置 环境:Ubuntu 22.04 step1. 首先下载安装依赖环境 更新软件源 sudo apt update下载依赖软件 sudo apt install \ autoconf \ automake \ build-essential \ cmake \ git-core \ libass-dev \ libfreetype6-dev \ libgnutls28-dev \ libsdl2-dev \…...
MyBatis-Plus 提供的一个通用服务层实现类
一、代码示例 Service public class CarriageServiceImpl extends ServiceImpl<CarriageMapper, CarriageEntity> implements CarriageService{Overridepublic List<CarriageDTO> findAll() {return List.of();} } 在这段代码中,CarriageServiceImpl …...

41-设计规则:线宽规则
1.设置电源线规则和信号线规则 2.设置信号线规则 3.设置电源线规则 如果未生效: ① 提升优先级即可。 ②查看使能选项有没有勾选...

使用MicroApp重构旧项目
前言 随着技术的飞速发展,我们公司内部一个基于“上古神器” jQuery PHP 构建的十年历史老项目已显力不从心,技术非常老旧且维护成本高昂,其实已经无数次想要重构,但是苦于历史遗留原因以及业务的稳定性而一直难以下手࿰…...
【Golang】go mod的使用
【1】GO111MODULE有三个值:off, on, auto off:go命令行将不会支持module功能,将会使用旧版本那种通过vendor目录或者GOPATH来查找依赖包的方式。 on:go命令行会使用modules功能,而不…...

Linux内核之网络套接字
文章目录 前言一、TCP4层模型和OSI7层模型OSI 7层模型TCP/IP 4层模型比较 二、套接字概念三、sockaddr_in和sockaddr结构体sockaddr_insockaddr区别 四、协议中的数据划分数据划分和首部添加流程数据接收与解析流程流程图 前言 一、TCP4层模型和OSI7层模型 OSI 7层模型 物理…...

SpringBoot事务-调度-缓存
一.Spring Boot中的事务管理 设置事务 Transactional(isolation Isolation.DEFAULT) Transactional(propagation Propagation.REQUIRED) 开启事务 EnableTransactionManagement 1. 开启事务管理 要开启 Spring 的事务管理,你需要在你的 Spring Boot 应用中添加 …...

社交媒体分析:如何利用Facebook的数据提升业务决
在数字化时代,社交媒体已经成为企业战略中不可或缺的一部分。Facebook,作为全球最大的社交平台之一,提供了丰富的数据资源,这些数据不仅能够帮助企业了解市场趋势,还能提升业务决策的精准度。本文将探讨如何有效利用Fa…...
企业中的流程组织
在每个实施SAP的企业中,除了传统的IT部门(包括SAP顾问所在的部门),必不可少的是一定形式的流程组织(Process Organization),流程组织的主要作用有 梳理企业内部业务流程,根据企业发展需要变更企业内部流程确定企业流程规范和部门…...
Redis:查询是否包含某个字符/字符串之二
上一篇:Redis:查询是否包含某个字符/字符串之一-CSDN博客 下一篇:Redis:查询是否包含某个字符/字符串之三-CSDN博客 摘要: 要查询数据,就需要遍历key,遍历value,其中包含存储等辅助…...
算法笔记|Day23贪心算法
算法笔记|Day23贪心算法 ☆☆☆☆☆leetcode 455.分发饼干题目分析代码 ☆☆☆☆☆leetcode 376. 摆动序列题目分析代码 ☆☆☆☆☆leetcode 53. 最大子序和题目分析代码 ☆☆☆☆☆leetcode 455.分发饼干 题目链接:leetcode 455.分发饼干 题目分析 优先考虑饼干…...

[星瞳科技]OpenMV使用时有哪些常见错误和解决办法?
常见代码错误 ImportError:no module named xxx 这个错误是Import错误,没有stepper这个模块。 原因: 你没有把stepper.py这个文件拖到你的板子里。见:模块的使用 拖过去之后,需要重启,使模块生效 MemoryError:FB …...
深度学习入门(二):PyTorch使用-张量的类型转换,拼接操作,索引操作,形状操作
目录 1. 张量类型转换 1.1 张量转换为 numpy 数组 1.2 numpy 转换为张量 1.3 标量张量和数字的转换 1.4 小节 2. 张量拼接操作 2.1 torch.cat 函数的使用 2.2 torch.stack 函数的使用 2.3 小节 3. 张量索引操作 3.1 简单行、列索引 3.2 列表索引 3.3 范围索引 3.…...

使用C#禁止Windows系统插入U盘(除鼠标键盘以外的USB设备)
试用网上成品的禁用U盘的相关软件,发现使用固态硬盘改装的U盘以及手机等设备,无法被禁止,无奈下,自己使用C#手搓了一个。 基本逻辑: 开机自启;启动时,修改注册表,禁止系统插入USB存…...

18. 基于ES实战海量数据检索
18. 基于ES实战海量数据检索 一. 概述二. Elasticsearch 全文检索1. 分布式搜索引擎2. 搜索引擎种类3. 倒排索引三. elastic使用1. 官网介绍2. docker安装3. elasticsearch-head工具4. 分词与内置分词4.1 内置分词器(了解即可)4.2 `IK`中文分词器三. 整合SpringCloud1. 基础配置…...

SpringBoot和Redis的交互数据操作以及Redis的持久化/删除策略和缓存问题
目录 一、SpringBoot和Redis/MySQL的数据交互 二、Redis的持久化 1、持久化过程保存什么 2、RDB方式 (1)RDB手动 (2)RDB自动 (3)RDB的优点 (4)RDB缺点 3、AOF方式 &#…...
Butterworth filter的运行原理
想象一下,你正在录制一个舞蹈表演的视频,但在录制过程中,摄像机由于风的影响稍微晃动了一下。现在,录像中的舞者看起来不再那么流畅,动作变得有点颤抖。你希望能让舞者的动作重新看起来平滑和优雅,这时你就…...
掌握SQL的威力:批量更新与删除的艺术
标题:掌握SQL的威力:批量更新与删除的艺术 在数据库管理中,批量更新(UPDATE)和删除(DELETE)操作是常见的需求,特别是在处理大量数据时。SQL作为数据库查询和操作的标准语言…...

《新一代数据可视化分析工具应用指南》正式开放下载
2024年8月12日,由DataEase开源项目组编写的《新一代数据可视化分析工具应用指南》白皮书正式面向广大用户开放下载。 《新一代数据可视化分析工具应用指南》是DataEase开源项目组为了支持企业落地并推广BI工具、推进企业数据可视化建设而编著的指导手册。通过本白皮…...

接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...

idea大量爆红问题解决
问题描述 在学习和工作中,idea是程序员不可缺少的一个工具,但是突然在有些时候就会出现大量爆红的问题,发现无法跳转,无论是关机重启或者是替换root都无法解决 就是如上所展示的问题,但是程序依然可以启动。 问题解决…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...

【单片机期末】单片机系统设计
主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...

NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...

自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元(GRU)长短期记忆神经网络(LSTM)…...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.
ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #:…...

从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践
作者:吴岐诗,杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言:融合数据湖与数仓的创新之路 在数字金融时代,数据已成为金融机构的核心竞争力。杭银消费金…...

android13 app的触摸问题定位分析流程
一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...