React中用@符号编写文件路径实现方法介绍

目录
  • 前言
  • 安装craco
  • 根路径下创建 craco.config.js
  • 写文件路径

前言

无论是vue还是react开发，我们通常需要引入路径的便捷化配置，通常我们都会约定使用路径@作为根路径地址。如果是个人react开发的@路径简单配置

安装craco

yarn add @craco/craco

根路径下创建 craco.config.js

const path = require("path")
module.exports = {
  webpack:{
    alias:{
      "@":path.resolve(__dirname,"src")
    }
  }
}

写文件路径

在 config-overrides.js 文件中书写如下代码：

// 增量配置当前项目中的webpack配置，建议在react18中不要用
// 建议在react18中也不要用装饰器
// override 方法，如果webpack中有此配置则，覆盖，如果没有则添加
const path = require('path')
const { override, addWebpackAlias } = require('customize-cra')
// 方案2：自定义
const customConfig = () => config => {
    config.resolve.alias['@'] = path.resolve('src')
    return config
}
module.exports = override(
    // 方案1：使用webpack内置方法
    // addWebpackAlias({
    //   '@': path.resolve('src')
    // }),
    customConfig()
)

上面的两种方案，任选一种即可完成配置，此时我们已经能够实现用@符指代src目录的功能了。

此时我们写这样的代码是不会报错的：

// import countAction from '../../store/actionCreators/countAction'
import countAction from '@/store/actionCreators/countAction'

但是在书写时，并不会触发编辑器的提示，没有提示写起来很痛苦，所以我们还需要再写一个配置文件，用作触发书写带有@符的文件路径时，编辑器的自动提示功能。

我们需要新建一个 jsconfig.json 文件，在该文件中书写如下代码：

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

温馨提示：在 react 项目中，修改配置文件后需要重启项目。

至此，我们就可以愉快地书写代码了。

到此这篇关于React中用@符号编写文件路径实现方法介绍的文章就介绍到这了,更多相关React @内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • react项目中@路径简单配置指南

    目录 前言 1. 安装craco 2.根路径下创建 craco.config.js 3. 修改package.json文件的script字段 4.使用 补充:React 配置 @ 路径别名 总结 前言 无论是vue还是react开发,我们通常需要引入路径的便捷化配置,通常我们都会约定使用路径@作为根路径地址.如果是个人react开发的@路径简单配置 1. 安装craco yarn add @craco/craco 2.根路径下创建 craco.config.js const path = req

  • React中用@符号编写文件路径实现方法介绍

    React中用@符号编写文件路径实现方法介绍

    目录 前言 安装craco 根路径下创建 craco.config.js 写文件路径 前言 无论是vue还是react开发,我们通常需要引入路径的便捷化配置,通常我们都会约定使用路径@作为根路径地址.如果是个人react开发的@路径简单配置 安装craco yarn add @craco/craco 根路径下创建 craco.config.js const path = require("path") module.exports = { webpack:{ alias:{ "

  • VS2019如何添加头文件路径的方法步骤

    大家在编写程序的时候往往会创建许多头文件,那么在VS2019中我们该怎么调用自己创建的头文件呢,其实只需要将头文件的路径添加到工程的编译环境中就行了,下面就来看看吧! 1.点击项目->属性->C/C+±>常规->附加包含路径,将路径添加进去. 最后再单击确定,就成功将自制的头文件路径添加成功啦! VS2019中设置了头文件路径却提示找不到头文件的一种原因 最近在设置VS2019工程中头文件的时候,出现一个很奇怪的问题:明明设置了头文件的附加包含目录,但是仍然提示头文件找不到.一种原

  • python输出当前目录下index.html文件路径的方法

    本文实例讲述了python输出当前目录下index.html文件路径的方法.分享给大家供大家参考.具体实现方法如下: import os import sys path = os.path.join(os.path.dirname(sys.argv[0]),'index.html') print path 希望本文所述对大家的Python程序设计有所帮助.

  • C#中Winform获取文件路径的方法实例小结

    本文实例讲述了C#中Winform获取文件路径的方法.分享给大家供大家参考.具体如下: 获取文件名方法: 用System.IO.Path.GetFileName和System.IO.Path.GetFileNameWithoutExtension(无扩展名)的方法 获取文件路径方法: //获取当前进程的完整路径,包含文件名(进程名). string str = this.GetType().Assembly.Location; result: X:\xxx\xxx\xxx.exe //(.exe

  • python获取程序执行文件路径的方法(推荐)

    1.获取当前执行主脚本方法:sys.argv[0]和_ file _ (1)sys.argv 一个传给Python脚本的指令参数列表.sys.argv[0]是脚本的名字.一般得到的是相对路径,用os.path.abspath(sys.argv[0])得到执行文件的绝对路径: dirname, filename = os.path.split(os.path.abspath(sys.argv[0])) os.path.realpath(sys.argv[0]) 如果在命令行执行sys.argv返回

  • python获取当前文件路径以及父文件路径的方法

    #当前文件的路径 pwd = os.getcwd() #当前文件的父路径 father_path=os.path.abspath(os.path.dirname(pwd)+os.path.sep+".") #当前文件的前两级目录 grader_father=os.path.abspath(os.path.dirname(pwd)+os.path.sep+"..") 追加部分代码实例 def TestPrtPwd(self): print("获取当前文件路径

  • python 拼接文件路径的方法

    如下所示: <code class="language-python">import os base_dir = os.path.dirname(__file__) # 获取当前文件目录 path = os.path.join(base_dir,'123.txt') # 获取文件拼接后的路径</code> 以上这篇python 拼接文件路径的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 查看nginx配置文件路径和资源文件路径的方法

    查看nginx配置文件路径 通过 nginx -t nginx -t命令的原始作用是用来验证nginx配置文件格式和配置是否存在异常,通过该命令会输出nginx的配置文件的路径和验证结果,在输出结果中就可以找到当前的nginx的加载的配置文件的地址,如下所示: nginx -t nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.co

  • react如何快速设置文件路径别名

    react如何快速设置文件路径别名

    React是用于构建用户界面的JavaScript库,  起源于Facebook的内部项目,因为该公司对市场上所有 JavaScript MVC框架,都不满意,就决定自己写一套,用来架设Instagram的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. React 是一个用于构建用户界面的 JAVASCRIPT 库. React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook 的内部项目,用来架设 Instagra

  • Java多线程中不同条件下编写生产消费者模型方法介绍

    Java多线程中不同条件下编写生产消费者模型方法介绍

    简介: 生产者.消费者模型是多线程编程的常见问题,最简单的一个生产者.一个消费者线程模型大多数人都能够写出来,但是一旦条件发生变化,我们就很容易掉进多线程的bug中.这篇文章主要讲解了生产者和消费者的数量,商品缓存位置数量,商品数量等多个条件的不同组合下,写出正确的生产者消费者模型的方法. 欢迎探讨,如有错误敬请指正 生产消费者模型 生产者消费者模型具体来讲,就是在一个系统中,存在生产者和消费者两种角色,他们通过内存缓冲区进行通信,生产者生产消费者需要的资料,消费者把资料做成产品.生产消费者模式

随机推荐