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

旅行的狮子

已于 2023-10-14 11:46:45 修改

阅读量880

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端杂烩文章标签： react.js 前端前端框架

于 2023-10-14 11:45:32 首次发布

本文链接：https://blog.csdn.net/asd0654123/article/details/133823070

前端杂烩专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在非create-react-app的React项目中，通过jsconfig.json和webpack.config.js的配置，使用@符号作为src目录的别名，提升代码可读性和重构迁移的便利性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

jsconfig.json配置

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

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

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

webpack配置

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

const path = require('path');

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

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

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