React中用@符号编写文件路径实现方法介绍
更新时间：2022年09月29日 11:03:55 作者：月光晒了很凉快
在Vue中，我们导入文件时，文件路径中可以使用@符号指代src目录，极大的简化了我们对路径的书写。但是react中，要想实现这种方式书写文件路径，需要写配置文件来实现
前言
无论是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 @内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了Redis数据结构高频面试问题解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
详解如何给React-Router添加路由页面切换时的过渡动画
这篇文章主要介绍了详解如何给React-Router添加路由页面切换时的过渡动画，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
本篇文章主要介绍了React实现菜谱软件的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2021-09-09
这篇文章主要为大家介绍了React前端DOM常见Hook封装示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家介绍了React中编写CSS实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家详细介绍了基于React Native 0.52实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
虽然一直有做react相关的优化,按需加载、dll 分离、服务端渲染,但是从来没有从路由代码分割这一块入手过,所以下面这篇文章主要给大家介绍了关于React中代码分割的方式,需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了React的Hook，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
使用 React Router Dom 实现路由导航的详细过程
React Router Dom 是 React 应用程序中用于处理路由的常用库,它提供了一系列组件和 API 来管理应用程序的路由,这篇文章主要介绍了使用 React Router Dom 实现路由导航,需要的朋友可以参考下2024-03-03
react-three/postprocessing库的参数中文含义使用解析
这篇文章主要介绍了react-three/postprocessing库的参数中文含义使用总结,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
最新评论