Vite+TypeScript React项目：Shadcn UI组件目录别名配置问题

我在搭建Vite+TypeScript的React应用时，执行npx shadcn-ui@latest init安装Shadcn UI后，发现components目录被创建在项目根目录而非src目录下。虽然已经在Vite配置里配置了@/components别名，但需要确保这个别名能被正确解析，让组件导入正常工作。当前相关配置如下：

当前Vite配置（vite.config.ts） #

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

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

当前Shadcn UI配置（.shadcn/ui.json） #

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/index.css",
    "baseColor": "gray",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

解决方案 #

你的Vite别名配置本身没问题，但需要同步TypeScript的路径映射，否则会出现编辑器报错或编译失败的情况，具体步骤如下：

1. 同步TypeScript路径配置

打开项目根目录的tsconfig.json，在compilerOptions中添加baseUrl和paths配置，确保TS能识别@/components等别名：

{
  "compilerOptions": {
    // 保留原有配置...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@/components/*": ["./components/*"],
      "@/lib/utils": ["./lib/utils"]
    }
  }
}

2. 验证导入功能

配置完成后，重启Vite开发服务器，就可以正常使用别名导入组件了：

// 示例：导入Shadcn的Button组件
import { Button } from '@/components/ui/button';
// 导入工具函数
import { cn } from '@/lib/utils';

额外注意事项

• 后续通过npx shadcn-ui@latest add新增组件时，Shadcn会自动使用@/components别名导入，因为你的.shadcn/ui.json里已经正确配置了别名映射。
• 确认lib/utils目录确实在项目根目录下，和别名配置的路径一致。

内容的提问来源于stack exchange，提问作者Lahiru Anushka