当前位置: 首页 > news >正文

React + Vite项目别名配置

  • Node版本:v20.16.0
  • Vite版本:5.4.1
  1. 安装 @types/node 依赖包

    pnpm i @types/node -D
    pnpm ls @types/node
    
  2. 配置 vite.config.js 文件:

    resolve: {alias: {"@": join(__dirname, "./src/"),},
    },
    

    请添加图片描述

  3. 使用配置好的别名 @
    请添加图片描述
    由上图我们发现,我们虽然配置了别名,但是vscode并没有给出提示,那就意味着别名没有生效。

  4. 解决方案:
    因为使用 Vite 创建的 React 项目,并没有生成 jsconfig.json 文件。因此我们需要手动创建 jsconfig.json 文件,添加如下配置:

    请添加图片描述

    {"compilerOptions": {"baseUrl": "./","paths": {"@/*": ["src/*"],}},"include": ["src"],"exclude": ["node_modules", "dist"]
    }
    

    此时,再导入组件使用@时,就会有提示了,如图:

    请添加图片描述

  5. 知识拓展:

    1. 配置别名,实际有两种写法:

      alias配置官方文档:https://cn.vitejs.dev/config/shared-options#resolve-alias

      1. 对象形式:Record<string, string>

        resolve: {alias: {'@': join(__dirname, '/src/')}},
        
      2. 数组形式:Array<{ find: string | RegExp, replacement: string, customResolver?: ResolverFunction | ResolverObject }>

        resolve: {alias: [{find: '@',replacement: join(__dirname, '/src/')}]},
        

相关文章:

React + Vite项目别名配置

Node版本&#xff1a;v20.16.0Vite版本&#xff1a;5.4.1 安装 types/node 依赖包 pnpm i types/node -D pnpm ls types/node配置 vite.config.js 文件: resolve: {alias: {"": join(__dirname, "./src/"),}, },使用配置好的别名 &#xff1a; 由上图我们…...

FFmpeg编译与配置 - Linux环境

Linux环境配置 环境&#xff1a;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();} } 在这段代码中&#xff0c;CarriageServiceImpl …...

41-设计规则:线宽规则

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

使用MicroApp重构旧项目

前言 随着技术的飞速发展&#xff0c;我们公司内部一个基于“上古神器” jQuery PHP 构建的十年历史老项目已显力不从心&#xff0c;技术非常老旧且维护成本高昂&#xff0c;其实已经无数次想要重构&#xff0c;但是苦于历史遗留原因以及业务的稳定性而一直难以下手&#xff0…...

【Golang】go mod的使用

【1】GO111MODULE有三个值&#xff1a;off, on, auto off&#xff1a;go命令行将不会支持module功能&#xff0c;将会使用旧版本那种通过vendor目录或者GOPATH来查找依赖包的方式。 on&#xff1a;go命令行会使用modules功能&#xff0c;而不…...

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 的事务管理&#xff0c;你需要在你的 Spring Boot 应用中添加 …...

社交媒体分析:如何利用Facebook的数据提升业务决

在数字化时代&#xff0c;社交媒体已经成为企业战略中不可或缺的一部分。Facebook&#xff0c;作为全球最大的社交平台之一&#xff0c;提供了丰富的数据资源&#xff0c;这些数据不仅能够帮助企业了解市场趋势&#xff0c;还能提升业务决策的精准度。本文将探讨如何有效利用Fa…...

企业中的流程组织

在每个实施SAP的企业中&#xff0c;除了传统的IT部门(包括SAP顾问所在的部门)&#xff0c;必不可少的是一定形式的流程组织(Process Organization)&#xff0c;流程组织的主要作用有 梳理企业内部业务流程&#xff0c;根据企业发展需要变更企业内部流程确定企业流程规范和部门…...

Redis:查询是否包含某个字符/字符串之二

上一篇&#xff1a;Redis&#xff1a;查询是否包含某个字符/字符串之一-CSDN博客 下一篇&#xff1a;Redis&#xff1a;查询是否包含某个字符/字符串之三-CSDN博客 摘要&#xff1a; 要查询数据&#xff0c;就需要遍历key&#xff0c;遍历value&#xff0c;其中包含存储等辅助…...

算法笔记|Day23贪心算法

算法笔记|Day23贪心算法 ☆☆☆☆☆leetcode 455.分发饼干题目分析代码 ☆☆☆☆☆leetcode 376. 摆动序列题目分析代码 ☆☆☆☆☆leetcode 53. 最大子序和题目分析代码 ☆☆☆☆☆leetcode 455.分发饼干 题目链接&#xff1a;leetcode 455.分发饼干 题目分析 优先考虑饼干…...

[星瞳科技]OpenMV使用时有哪些常见错误和解决办法?

常见代码错误 ImportError:no module named xxx 这个错误是Import错误&#xff0c;没有stepper这个模块。 原因&#xff1a; 你没有把stepper.py这个文件拖到你的板子里。见&#xff1a;模块的使用 拖过去之后&#xff0c;需要重启&#xff0c;使模块生效 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盘的相关软件&#xff0c;发现使用固态硬盘改装的U盘以及手机等设备&#xff0c;无法被禁止&#xff0c;无奈下&#xff0c;自己使用C#手搓了一个。 基本逻辑&#xff1a; 开机自启&#xff1b;启动时&#xff0c;修改注册表&#xff0c;禁止系统插入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方式 &#xff08;1&#xff09;RDB手动 &#xff08;2&#xff09;RDB自动 &#xff08;3&#xff09;RDB的优点 &#xff08;4&#xff09;RDB缺点 3、AOF方式 &#…...

Butterworth filter的运行原理

想象一下&#xff0c;你正在录制一个舞蹈表演的视频&#xff0c;但在录制过程中&#xff0c;摄像机由于风的影响稍微晃动了一下。现在&#xff0c;录像中的舞者看起来不再那么流畅&#xff0c;动作变得有点颤抖。你希望能让舞者的动作重新看起来平滑和优雅&#xff0c;这时你就…...

掌握SQL的威力:批量更新与删除的艺术

标题&#xff1a;掌握SQL的威力&#xff1a;批量更新与删除的艺术 在数据库管理中&#xff0c;批量更新&#xff08;UPDATE&#xff09;和删除&#xff08;DELETE&#xff09;操作是常见的需求&#xff0c;特别是在处理大量数据时。SQL作为数据库查询和操作的标准语言&#xf…...

《新一代数据可视化分析工具应用指南》正式开放下载

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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集&#xff0c;单周期执行&#xff1b;低功耗、CIP 独立外设&#xff1b;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel&#xff08;原始…...