React配置baseUrl后无法解析资源路径的问题求助

排查步骤： #

• 核对文件夹结构
  确认src目录下的层级完全匹配导入路径：

  src/
    assets/
      Images/
        me.jpg
    components/
      Hero/
        index.jsx
  

  注意：文件名/文件夹名的大小写要完全一致，部分打包工具会严格区分大小写（即使Windows系统不区分）。

• 检查jsconfig.json配置
  确保配置正确且生效，示例配置：

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

  重点：include字段必须包含src下所有文件，否则配置不会对部分目录生效。

• 确认导入语句写法
  导入语句要和路径严格对应，示例：

  import meImage from 'assets/Images/me.jpg';
  

• 重启开发服务器
  修改jsconfig.json后，必须重启React开发服务器（执行npm start或yarn start），新配置才会生效。

• 自定义Webpack配置排查（非Create React App默认项目）
  如果是自定义Webpack配置，需要在resolve中添加src目录到模块搜索路径：

  const path = require('path');
  
  module.exports = {
    // 其他配置
    resolve: {
      modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    }
  };
  

内容的提问来源于stack exchange，提问作者Oliver