本文介绍如何在 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
你就可以在任意文件中这样导入：
