react配置项目路径别名@

news2024/11/27 2:33:11

为什么有的项目引入路径写@可以,自己的不行呢?

因为别人的项目是配置过路径别名的,@就表示src目录,因此我们也需要配置一遍,以下是react项目示范,vue项目同理。

ts对@指向src目录的提示是不支持的,vite默认也不支持

所以需要手动配置@符号的指向

在vite.config.ts中添加配置:

import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve:{
    alias:{
      "@":path.resolve(__dirname,"./src")
    }
  }
})

如果这时候引入的path模块报红,但是我们已经有node,所以也已经有path模块,只是缺少ts的一些声明配置。

所以需要安装关于node这个库的ts声明配置:

npm i -D @types/node

安装成功就没有报红了,如果import后面的path报红就把引入换成 

import * as path from "path";

现在路径别名有了,但是输入@时我希望有文件路径的提示,这时还需要再增加配置,

需要我们在tsconfig.json文件中,添加两项配置:

"compilerOptions": {
    ...
    "paths": {
      "@/*":[
        "src/*"
      ]
    }
  },

配置好之后输入@就有路径资源提示了

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

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

相关文章

Linux命令学习之原来最简单的ls命令这么复杂

ls命令的使用格式如下 ls [选项] [具体的文件] # [] 表示可选 直接在命令行输入ls将当前目录下的列出当前目录下的文件和目录。 1 2 $ls LICENSE README.md hello.c 也可以指定具体的目录和文件 1 2 3 $ls / bin dev home lib32 libx32 mnt proc run srv tmp …

Kotlin 基础学习笔记第七章——运算符重载及其他约定

如你所知,java在标准库中有一些与特定的类相关联的语言特性。例如,实现java.lang.Iterable接口的对象可以在for循环中使用;实现了java.lang.AutoCloseable接口的对象可以在try-with-resource语句中使用。 一、重载算术运算符 1、重载二元运算…

IIC的使用

借鉴于:蓝桥杯嵌入式快速通关篇,IIC通讯及EEPROM_穿上我的格子衫的博客-CSDN博客 IIC原理超详细讲解---值得一看_Z小旋的博客-CSDN博客_iic 总线空闲:SDA 1,SCL 1; 启动信号:SCL 1,SDA 1 -> 0; 停止信号:SCL …

【王道计算机网络笔记】物理层-通信基础

文章目录物理层接口特性典型的数据通信模型数据通信相关术语三种通信方式(交互方式)串行传输&并行传输(数据传输方式)同步传输&异步传输码元速率带宽失真失真的一种现象——码间串扰奈氏准则(奈奎斯特定理&…

矩阵股份上市首日跌破发行价:振幅达10%,王冠为实际控制人

11月22日,矩阵纵横设计股份有限公司(下称“矩阵股份”,SZ:301365)在深圳证券交易所创业板上市。本次上市,矩阵股份的发行价为34.72元/股,发行数量为3000万股,募资总额约为10.42亿元,…

SpringBoot SpringBoot 开发实用篇 5 整合第三方技术 5.15 SpringBoot 整合 task

SpringBoot 【黑马程序员SpringBoot2全套视频教程,springboot零基础到项目实战(spring boot2完整版)】 SpringBoot 开发实用篇 文章目录SpringBootSpringBoot 开发实用篇5 整合第三方技术5.15 SpringBoot 整合 task5.15.1 SpringBoot 整合 …

对zygote的理解

一、 zygote的作用 启动SystemServer SystemServer需要用于zygote准备好的一些系统资源,比如常用类、注册的JNI函数、主题资源、共享库等等,直接从zygote那继承过来,SystemServer就不用重新再加载一遍,这样对性能有很大的提升。 …

CRM系统中联系人管理的十大好处

联系人管理通常是你的CRM策略中的一个关键部分。它是存储和组织联系人数据以便于访问的做法。简而言之,就是管理联系人数据的过程。如今联系人管理已内置到 CRM 系统中。因此,我们可以考虑利用系统软件将以下优点应用于联系人管理中。 1、更好、更持久的…

Matplotlib用法使用、Matplotlib绘图作图画图

一、Matplotlib Matplotlib:专门用于开发2D或3D图表,以渐进、交互式方式实现数据可视化 可视化是在整个数据挖掘的关键辅助工具,可以清晰的理解数据,从而调整我们的分析方法 能将数据进行可视化,更直观的呈现使数据…

希望所有计算机学生能看到这篇c语言教程

大部分程序员走入编程世界第一个学习的语言就是C语言。 作为一门古老的编程语言,c语言拥有48年的发展历程。 为什么要学习 C语言? C语言是学习计算机程序设计语言的入门语言。C语言是一门偏底层的语言,学好它,可以让你更好的了…

E - Fire! (双向bfs)

UVA-11624-Fire! 题意:在n*m的网格内,有一个人和n堆火,人可以往上下左右四个方向走,同时所有的火也会想四周蔓延,问你人可不可以在火包围他之前逃离这个n*m的范围。 思路:问人可不可以逃离这个范围&#xf…

m基于VDLL的矢量型GPS信号跟踪算法matlab仿真

目录 1.算法概述 2.仿真效果预览 3.MATLAB部分代码预览 4.完整MATLAB程序 1.算法概述 载波跟踪环是传统独立式GPS接收机最脆弱的环节,针对弱信号环境下其比伪码跟踪环路更容易失锁的问题,给出一种基于矢量频率锁定环(vector-frequency lo…

集成学习-Boosting

Boosting 采用串行的方式训练,各基分类器之间有依赖。根据当前模型损失函数的负梯度训练新的弱分类器,将训练好的弱分类器以累加的形式结合到现有模型中。 过程中会不断减小损失函数,使模型偏差不断降低,方差不会降低。因为各弱分…

《CTFshow - Web入门》02. Web 11~20

Web 11~20web11知识点题解web12知识点题解web13知识点题解web14知识点题解web15知识点题解web16知识点题解web17知识点题解web18知识点题解web19知识点题解web20知识点题解web11 知识点 dns检查查询:http://dbcha.com/,输入域名,获取flag。…

MySQL数据库期末考试试题及参考答案(07)

版权声明 本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 一、 填空题 如果不想提交当前事务,可以使用_____语句回滚事务。每个事务都是完整不可分割的最小单元是事务的_____性。MySQL中,显式开启事务的语句…

屏幕视频捕获组件-ByteScout Screen Capturing SDK

使用 ByteScout Screen Capturing SDK,您可以轻松地将屏幕视频捕获功能添加到您的应用程序中。输出带有音频、鼠标移动和点击的高质量桌面屏幕视频录制。 主要优势 只需几行代码即可在您的应用中启用屏幕视频捕获和屏幕录制功能;无需互联网连接即可离线…

Django day1

在windows下可以直接的创建django项目 但是需要把自动生成的templates和setting里面的DIRS里面字段删除(templates自动生成的可以删不删都行,我是看视频那个老师删了,但是setting DIRS里面的字段需要删,至于具体为啥我已经忘了&am…

TiDB数据库概述——PD

PD PD的架构与功能TSO的分配PD的调度原理label的作用 PD的架构 PD的个数一般是奇数个的。 PD的主要功能: 整个集群TiKV的元数据存储分配全局ID和事务ID生成全局时间戳TSO收集群信息进行调度提供label,支持高可用提供TiDB Dashboard 路由功能 用key…

vue3使用富文本编辑器wangEditor-v5(未使用composition api写法)

效果 安装 安装核心库和其vue组件库 yarn add wangeditor/editor yarn add wangeditor/editor-for-vuenext使用v-model封装富文本组件editor.vue <template><div class"editor-box"><Toolbar class"toolbar" :editor"editor" …

Flink是什么?场景?处理流的发展演变?

Flink是什么&#xff1f;Flink是什么&#xff1f;为什么选择Flink&#xff1f;什么场景需要处理流数据?处理流的发展演变Flink是什么&#xff1f; Apache Flink 是一个在无界和有界数据流上进行状态计算的框架和分布式处理引擎。Flink 能在所有常见集群环境中运行&#xff0c…