本文介绍如何在 react（及 next.js）项目中配置路径别名（如 `@config/...`），通过 `jsconfig.json`（或 `tsconfig.json`）实现简洁、可维护的绝对路径导入，避免冗长相对路径（如 `../../../config/config.json`）。
在 React 或 Next.js 项目中，像 import config from "@config/config.json" 这样的导入语法，并非 JavaScript 原生支持，而是由构建工具（如 Webpack、Vite 或 Next.js 内置的打包器）配合编辑器（VS Code）提供的路径别名（Path Aliases）功能实现的。它本质是将 @config 这类前缀映射到项目中的实际物理路径，从而提升代码可读性与可重构性。
✅ 配置步骤（以 jsconfig.json 为例）
在项目根目录（与 package.json 同级）创建 jsconfig.json 文件：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@config/*": ["config/*"],
"@components/*": ["src/components/*"],
"@utils/*": ["src/utils/*"],
"@assets/*": ["public/assets/*"]
}
},
"include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}? 说明： "baseUrl": "." 表示所有别名路径均相对于项目根目录解析； "@config/*": ["config/*"] 表示所有以 @config/ 开头的导入，将被重写为从根目录下的 config/ 文件夹查找（例如 @config/config.json → ./config/config.json）； 若使用 TypeScript，请改用 tsconfig.json，配置方式完全相同； Next.js 13+ 默认支持该配置，无需额外插件；Create React App（CRA）需升级至 v5.0+ 并确保使用 react-scripts >= 5.0.0 才原生支持（旧版需 craco 或 react-app-rewired）。
? 使用示例
假设你的项目结构如下：
my-app/
├── jsconfig.json
├── config/
│ └── config.json
├── src/
│ └── components/
│ └── Header.jsx
└── public/
└── assets/logo.svg你就可以在任意文件中这样导入：
// src/components/Header.jsx import config from "@config/config.json"; import logo from "@assets/logo.svg"; console.log(config.title); // ✅ 正常解析并运行
⚠️ 注意事项
- 路径别名仅影响模块解析与 IDE 跳转，不改变最终打包产物——Webpack/Vite 会在构建时自动替换为真实相对路径；
- 修改 jsconfig.json 后，需重启开发服务器（npm run dev）和 VS Code（或重新加载窗口）才能生效；
- paths 中的值必须是数组（即使只映射一个路径），且目标路径需存在，否则运行时报错 Module not found；
- Next.js 中若同时使用 App Router 和 @ 别名，请确保 app/ 目录内组件也遵循相同配置逻辑（推荐统一管理 @/ 指向 src/，如 "@/*": ["src/*"]，更符合社区惯例）。
? 进阶建议
为保持一致性，许多团队采用 @/ 作为 src/ 的别名：
"paths": {
"@/*": ["src/*"],
"@config/*": ["config/*"]
}这样 import Button from "@/components/Button"; 更简洁通用。
路径别名不是“黑魔法”，而是现代前端工程化的重要实践。合理使用它，能显著降低大型项目中路径维护成本，让代码更健壮、协作更高效。
