React新手使用Vite+Tailwind时导入路径报错求助

问题1：Failed to resolve import "src/lib/utils" from "src/components/ui/button.tsx" #

这个错误是因为Vite默认不会把src/开头的路径识别为项目本地目录，而是会去node_modules中查找对应包，所以找不到你的utils.ts文件。有两种解决方式：

方式1：改用相对路径导入 #

根据文件层级关系，button.tsx位于src/components/ui/，utils.ts位于src/lib/，所以相对路径应为../../lib/utils，修改button.tsx中的导入语句：

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "../../lib/utils"

方式2：配置路径别名（推荐大型项目使用） #

通过配置Vite和TypeScript的路径别名，让@/直接映射到项目的src目录，步骤如下：

1. 安装类型依赖（TypeScript项目需要）：

   npm install @types/node --save-dev
   

2. 修改vite.config.ts（或vite.config.js），添加别名配置：

   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'),
       },
     },
   })
   

3. 修改tsconfig.json，让TypeScript识别别名：
   在compilerOptions中添加以下配置：

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

配置完成后，你就可以在button.tsx中用@/lib/utils导入，同时在SignupForm.tsx中用import { Button } from "@/components/ui/button"导入组件。

问题2：Cannot find module 'components/ui/button' or its corresponding type declarations #

去掉@/后直接用components/ui/button导入，Vite同样会默认去node_modules中查找这个包，而不是你的本地组件目录，所以会报错。按照上面的路径别名配置完成后，使用@/components/ui/button就能正常导入。

内容的提问来源于stack exchange，提问作者houra-dev