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

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

  1. jsconfig.json配置

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

javascript 复制代码
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

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

  1. webpack配置

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

javascript 复制代码
const path = require('path');

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

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

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

相关推荐
爷_6 小时前
字节跳动震撼开源Coze平台!手把手教你本地搭建AI智能体开发环境
前端·人工智能·后端
charlee447 小时前
行业思考:不是前端不行,是只会前端不行
前端·ai
Amodoro8 小时前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
Wcowin8 小时前
Mkdocs相关插件推荐(原创+合作)
前端·mkdocs
伍哥的传说9 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang4539 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself2439 小时前
想把一个easyui的表格<th>改成下拉怎么做
前端·深度学习·easyui
三口吃掉你9 小时前
Web服务器(Tomcat、项目部署)
服务器·前端·tomcat
Trust yourself2439 小时前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui
烛阴9 小时前
Tile Pattern
前端·webgl