当前位置：首页 > 文章列表 > 文章 > 前端 > React项目中配置@路径别名方法

React项目中配置@路径别名方法

2026-02-07 08:54:54 0浏览收藏

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《React 中使用 @ 路径别名导入方法》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

如何在 React.js 中使用 @ 符号进行路径别名导入

在 React（如 Next.js）项目中，import config from "@config/config.json" 这类以 @ 开头的导入语法是通过配置路径别名（Path Aliases）实现的，需在 jsconfig.json（开发环境）或 tsconfig.json（TypeScript 项目）中设置 baseUrl 和 paths。

这种 @ 前缀本质上是模块解析路径别名（Module Path Alias），并非 Webpack 或 Vite 原生语法，而是由构建工具（如 Next.js、Vite、Create React App v5+）基于 TypeScript/JavaScript 配置文件自动识别并支持的特性。

✅ 正确配置步骤（以 Next.js/React 为例）

在项目根目录创建 jsconfig.json（若使用 TypeScript，则用 tsconfig.json，二者配置结构一致）
配置 baseUrl 和 paths 映射规则：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@config/*": ["config/*"],
      "@src/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

? 注意："baseUrl": "." 表示所有别名路径都相对于项目根目录解析；"@config/*" 将匹配 import x from "@config/xxx"，并映射到 ./config/xxx。

确保目录结构匹配
例如，若你写 import theme from "@config/theme.json"，则项目中必须存在：

your-project/
├── jsconfig.json
├── config/
│   ├── config.json
│   └── theme.json   ← 此文件将被正确解析

⚠️ 常见注意事项

Next.js 13+ 默认支持 jsconfig.json / tsconfig.json 路径别名，无需额外插件；但需重启开发服务器（next dev）使配置生效。
Create React App（CRA）v5+ 也支持，但旧版本需 craco 或 react-app-rewired 手动配置 Webpack。

Vite 用户：需在 vite.config.ts 中显式配置 resolve.alias（jsconfig.json 不生效）：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@config': path.resolve(__dirname, 'config'),
      '@src': path.resolve(__dirname, 'src')
    }
  }
});