Vite React中Shadcn初始化问题：组件位置错误，需移至src目录

1. 迁移现有组件到src目录 #

• 手动将根目录下的@/components/ui文件夹移动到src目录内，最终结构变为：

  --| src
      ----| components
          ----| ui
      ----| App.tsx
  --| tailwind.config.js
  --| tsconfig.json
  --| tsconfig.app.json
  --| tsconfig.node.json
  

2. 调整TypeScript路径别名 #

修改TypeScript配置文件中的路径映射，让@指向src目录：

• tsconfig.json（根配置）：
  在compilerOptions.paths中更新为：

  "compilerOptions": {
    // 其他配置...
    "paths": {
      "@/*": ["./src/*"]
    }
  }
  

• tsconfig.app.json（应用代码配置）：
  添加或同步相同的路径映射：

  "compilerOptions": {
    // 其他配置...
    "paths": {
      "@/*": ["./src/*"]
    }
  }
  

• tsconfig.node.json：无需修改，该配置仅用于Vite等Node端工具。

3. 更新Tailwind CSS配置 #

打开tailwind.config.js，修改content数组，将组件路径替换为src下的目标位置：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/ui/**/*.{js,ts,jsx,tsx,mdx}"
  ],
  // 其他配置...
}

4. 修复现有代码的导入路径 #

全局替换项目中所有@/components/ui/xxx的导入语句（若已配置好@指向src，该路径可直接保留，无需修改）。示例：

import Button from '@/components/ui/button'

5. 后续安装Shadcn组件的正确命令 #

以后安装新组件时，通过--components-path参数指定目标路径，避免组件再被安装到根目录：

npx shadcn-ui@latest add button --components-path src/components/ui

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