如何为JavaScript React项目添加自定义import导入路径？

云原生阿岚

2026-9-24

完全可以实现该需求，根据你使用的项目脚手架不同，具体配置方式如下：

React项目路径别名配置方案

1. 未eject的Create React App（CRA）项目

首先安装依赖@craco/craco，无需eject项目即可修改webpack配置
项目根目录新建craco.config.js，添加如下配置：

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components/'),
      // 可按需添加其他别名，比如@assets、@utils等
      '@': path.resolve(__dirname, 'src/')
    }
  }
}

修改package.json中的启动脚本，将原有react-scripts替换为craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

若要IDE能正确识别别名不提示报错，需在项目根目录新建jsconfig.json（使用TypeScript的项目修改已有tsconfig.json），添加如下配置：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@components/*": ["components/*"],
      "@/*": ["./*"]
    }
  }
}

2. 已eject的CRA项目/自定义webpack配置的React项目

直接修改项目webpack配置文件（通常为config/webpack.config.js），在resolve.alias节点下添加别名配置：

resolve: {
  alias: {
    '@components': path.resolve(__dirname, '../src/components/'),
    // 其他别名配置
  },
  // 保留原有其他webpack配置
}

同样需要按上述方法配置jsconfig.json/tsconfig.json的路径映射。

3. Vite创建的React项目

直接修改根目录的vite.config.js/vite.config.ts：

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

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