React添加文件路径时使用@符号代替src目录(非creae-react-app)

news2024/12/26 21:14:44

在其它项目中看到的可以用@符号来代替src目录,那么在自己的react项目中也必须得尝试一下。本人的项目不是通过create-react-app脚手架来创建的,无法使用craco或者的方案来实现。

  1. jsconfig.json配置

    用的vscode进行开发,查看项目当中是否存在jsconfig.json这个文件,没有的话可以自己创建,然后向文件中添加以下内容:

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

这个配置的目的是为了让vscode识别@符号,在编写代码时输入@符号后,vscode会进行自动提示
在这里插入图片描述

  1. webpack配置

然后在webpack.config.js中添加以下配置,将@符号映射到src目录的绝对路径

const path = require('path');

module.exports = {
  // ...其他配置项

  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src') // 将@符号映射到src目录的绝对路径
    }
  }
};

完成上述两步,重启项目之后,就可以在项目中使用@符号来代替src目录了,看下替换以后的效果,确实可以使代码简洁、可读性更高,并且方便重构和迁移路径。
在这里插入图片描述

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

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

相关文章

与HTTP相关的各种协议

TCP/IP TCP/IP协议是目前网络世界“事实上”的标准通信协议,实际上是一系列网络通信协议的统称,其中最核心的两个协议是 TCP和IP,其他的还有 UDP、ICMP、ARP 等等,共同构成了一个复杂但有层次的协议栈。 这个协议栈有四层&#x…

Nginx:动静分离(示意图+配置讲解)

示意图: 动静分离 动静分离是指将动态内容和静态内容分开处理的一种方式。通常,动态内容是指由服务器端处理的,例如动态生成的网页、数据库查询等。静态内容是指不需要经过服务器端处理的,例如图片、CSS、JavaScript文件等。通过…

C++之make_unique、namespace、class类总结(二百四十二)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生…

React-Router-6学习笔记

一、新建react项目 1、新建项目命令: yarn create vite react-router --template react 2、在vsCode中打开项目 3、在vsCode打开命令终端,输入 yarn 4、执行yarn dev启动当前项目 yarn dev 5、删除多余的东西,保留app.jsx和main.jsx文…

高校教务系统登录页面JS分析——皖西学院

高校教务系统密码加密逻辑及JS逆向 本文将介绍皖西学院教务系统的密码加密逻辑以及使用JavaScript进行逆向分析的过程。通过本文,你将了解到密码加密的基本概念、常用加密算法以及如何通过逆向分析来破解密码。 本文仅供交流学习,勿用于非法用途。 一、密…

NLP算法面经 | 腾讯 VS 美团

作者 | 曾同学 编辑 | NewBeeNLP 面试锦囊之面经分享系列,持续更新中 后台回复『面试』加入讨论组交流噢 lz从3月初脚因打球扭伤了开始,投递简历,接二连三的面试鞭尸又面试,昨天才终于上岸了,分享经验~ 腾讯PCG看点&…

SSH 基础学习使用

什么是SSH 1.SSH SSH(Secure Shell) 是较可靠,专为远程登录会话和其他网络服务提供安全性的协议,利用 SSH 协议可以有效防止远程管理过程中的信息泄露问题。 实际应用中,主要用于保证远程登录和远程通信的安全&#…

数字技术助力智慧公厕,让公厕变身为全新创新应用

在如今数字化的时代,数字技术的集成应用已经渗透到了生活的方方面面。其中一个令人瞩目的领域就是智慧公厕。以前只是简单的厕所,如今借助数字技术的力量,智慧公厕变得功能强大、智能高效。接下来,我们将以智慧公厕源头领航厂家广…

Retrieve Anything To Augment Large Language Models

简介 论文主要介绍了一套通过对比学习和蒸馏学习的方法,来增强学习了embedding向量,然后能够在知识增强,长上下文建模,ICL和工具学习等方面来增强大模型能力。

计算机网络第一章补充整理(计算机网络体系结构)

前言:以下整理内容,参考《计算机网络自顶向下》和哈工大的计网慕课 目录 计算机网络的体系结构的一些概念为什么采用分层结构?分层结构的优点分层结构的缺点 开放系统互连(OSI)参考模型物理层功能数据链路层功能网络层…

大数据flink篇之三-flink运行环境安装后续一yarn-session安装

前提: Hadoop 必須保证在 2.2 以上,且必須裝有 hdfs 服务。Hadoop安装后续会有相关说明。 具体的,在生产环境中,flink一般会交由yarn、k8s等资源管理平台来处理。本章主要讲解yarn模式下的session cluster模式。 flink Session-C…

FPC柔性电路板介绍及PCB设计经验规则总结

🏡《总目录》 目录 1,概述2,FPC的特点3,FPC设计十五条经验规则4,总结1,概述 FPC软板由于具有可弯曲折叠的特点,当前在消费电子,汽车电子和航空航天领域应用广泛。本文详细介绍FPC的特点并对FPC板设计中需要注意的经验原则进行总结。 2,FPC的特点 FPC的全称是Flexibl…

Python实现带图形界面的计算器

Python实现带图形界面的计算器 在本文中,我们将使用Python编写一个带有图形用户界面的计算器程序。这个程序将允许用户通过点击按钮或键盘输入数字和操作符,并在显示屏上显示计算结果。 开发环境准备 要运行这个计算器程序,您需要安装Pyth…

数据链路层—以太网协议

数据链路层—以太网协议 文章目录 数据链路层—以太网协议重新认识四层模型以太网局域网特点以太网帧格式碰撞领域和避免碰撞算法认识MAC地址令牌环网交换机认识MTUMTU对IP协议的影响MTU对UDP协议的影响MTU对TCP协议的影响数据跨网段传输的过程 重新认识四层模型 TCP/IP分层模型…

C# Convert和BitConverter类学习

前言: C# Convert是一个比较好用的强制转换,相比我们之前用的(int)或者是类型.Parse(),Convert给我们提供了很多的选项,特别是对于有字节要求的变量,Convert简直就是C#编程的福音,BitConvert对于byte数组转…

数据结构的奥秘:算法与实际应用的完美融合

文章目录 第一部分:数据结构的精髓1. 数组(Array)2. 链表(Linked List)3. 栈(Stack)和队列(Queue)4. 树(Tree)5. 图(Graph&#xff09…

fastjson 1.2.47 远程命令执行漏洞

fastjson 1.2.47 远程命令执行漏洞 文章目录 fastjson 1.2.47 远程命令执行漏洞1 在线漏洞解读:2 环境搭建3 影响版本:4 漏洞复现4.1 访问页面4.2 bp抓包,修改参数 5 使用插件检测漏洞【FastjsonScan】5.1使用説明5.2 使用方法5.2.1 右键菜单中&#xff…

车载电子电器架构 —— 国产基础软件生态简介

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

python二次开发CATIA:测量曲线长度

以下代码是使用Python语言通过win32com库来控制CATIA应用程序的一个示例。主要步骤包括创建一个新的Part文件,然后在其中创建一个新的几何图形集,并在这个集合中创建一个样条线。这个样条线是通过一组给定的坐标点来创建的,这些点被添加到集合…

利用深度学习进行组水平大脑解码

摘要 脑成像数据解码越来越受欢迎,可用于脑机接口和神经表征等方面的研究。解码通常是特定于个体的,由于不同被试之间的差异较大,因而不能很好地泛化。克服这一问题的技术不仅需要能够提供更丰富的神经科学见解,而且还能使组水平…