Vite React 的 Shadcn 初始化问题

Question

我正在使用 Vite 在 React 应用程序中安装 shadcn，但是当按照其文档中的步骤进行操作时，组件被放置在 @ 目录中，并且我无法使用它们。

我注意到的一件事是，在创建 React 项目时，我有三个 TypeScript 配置文件：tsconfig.json、tsconfig.app.json 和 tsconfig.node.json。

项目结构：

--| @

----|组件

------|用户界面

--| tailwind.config.js

--|源

----|应用程序.tsx

我希望将 shadcn 库组件放置在 src 目录中。

Answer 1

他们在 Vite 的安装文档中添加了解释。 但是，这仅适用于打字稿。 您需要编辑

tsconfig.json

和

tsconfig.app.json

文件。

并且因为你使用使用 ES 模块的 vite，所以你的

vite.config

应该有这个（我告诉它在 ./app/... 中安装组件，你可以将其更改为任何内容，通常是 .src/ 文件夹）：

import { defineConfig } from "vite";
import path from "path";
import { fileURLToPath } from "url";

export default defineConfig({
  /.../
  resolve: {
    alias: {
      "@": path.resolve(path.dirname(fileURLToPath(import.meta.url)), "./app"),
    },
  },
});