React import 配置路径别名‘@’，简化import Component的方式

最新推荐文章于 2025-05-07 14:18:01 发布

请给我一杯冰可乐

最新推荐文章于 2025-05-07 14:18:01 发布

阅读量6.9k

点赞数 3

分类专栏： React JavaScript 文章标签： javascript reactjs

本文链接：https://blog.csdn.net/Cole31415/article/details/106229146

版权

本文介绍了如何在React项目中通过配置路径别名'@'，简化组件import的方式，提高代码可维护性。通过两种路径别名重写方法，结合customize-cra覆写webpack配置，并演示了在VSCode中启用@路径智能提示的设置过程，包括安装Path Intellisense插件和配置jsconfig.json。

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

摘要

在react中，大多数业务逻辑都组件化；极大的减轻了代码的冗余度，如果组件的层次比较深的话，组件的import就比较费劲，在import时使用“…/…/components/test”的方式，组件的import就会稍显混乱、组件代码不容易维护。为了可高效的、快速的维护组件代码，废弃“…/…/”的组件引入方式，配置一个组件路径重写的方式引入组件。

配置内容

我在之前就介绍过在react中引入less的配置，同样的为了配置一个路径别名，使用customize-cra来覆写webpack底层配置。(配置覆写webpack需要的插件以及第三方库就不在复述，不清楚的可以去参考Ant Design官方的配置说明)

附上我的less配置原文地址：https://www.cnblogs.com/BlueBerryCode/p/11943111.html

路径别名重写方式一

const {
    override } = require('customize-cra');
const path = require("path");
 
module.exports = override(
     config =>{
   
         config.resolve.alias = {
   
             "@": path.resolve(__dirname, "src")
         };
         return config;
     }

最低0.47元/天解锁文章