React 18.2.0中jsconfig.json绝对路径配置无效求助

Create React App（CRA）构建的React项目原生支持通过jsconfig.json配置绝对导入，不需要依赖任何第三方库。你的配置存在范围冗余问题，调整后即可生效：

一、修正jsconfig.json配置 #

将baseUrl指向源码核心目录，缩小include范围避免解析混乱，路径映射可按需选择统一或细分：

方案1：统一映射（推荐，更简洁） #

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"] // 所有@/xxx 直接对应src/xxx
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "build"]
}

方案2：保留细分映射 #

如果需要保留原有的细分路径规则，调整include范围即可：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/components/*": ["src/components/*"],
      "@/models/*": ["src/models/*"],
      "@/public/*": ["public/*"],
      "@/styles/*": ["src/styles/*"]
    }
  },
  "include": ["src/**/*", "public/**/*"],
  "exclude": ["node_modules", "build"]
}

二、关键生效步骤 #

1. 确保jsconfig.json放在项目根目录（与package.json同级）
2. 重启本地开发服务器（配置修改后必须重启，否则不会生效）
3. 编辑器（如VS Code）若仍有路径报错，可通过Ctrl+Shift+P执行Reload Window刷新识别

三、注意事项 #

• 仅适用于CRA官方脚手架创建的项目，若手动配置webpack或使用其他构建工具，需额外配置resolve.alias，但CRA会自动读取jsconfig.json配置
• 不要使用"./"作为include范围，会导致解析根目录所有文件，干扰路径映射逻辑

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