vite + typescript + React 的路径别名不起作用

Question

vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, './src'),
        },
    },
})

tsconfig.json

{
  "files": [],
  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

应用程序.tsx

import './App.css';
import { cn } from '@/lib/utils';

function App() {
  return (
    <>
      <h1 className={cn('bg-slate-50 p-3 text-3xl font-bold underline', true ? 'bg-red-500' : 'bg-blue-500')}>
        Hello world!
      </h1>
    </>
  );
}

export default App;

我在另一个项目中也有相同的配置，但在这里，我的项目工作正常，但 vscode IDE 出现错误

Cannot find module '@/lib/utils' or its corresponding type declarations.ts(2307)

• 尝试重新启动 ts 服务器
• 尝试不同的改变路径

Answer 1

您正在将

@/*

映射到

./src/*

。 您的

lib

文件夹位于

src

下吗？