shadcn/ui组件导入失败：URL加载错误修复方案咨询

报错信息：

Failed to load url /src/components/ui/input (resolved id: /src/components/ui/input) in /Users/dchoi/Github/bargain-battle/frontend/src/containers/Game/Game.tsx. Does the file exist?

网络面板请求路径：

http://127.0.0.1:5173/src/components/ui/input?t=1687730147732

实际文件路径：/@/components/ui/input.tsx

解决步骤 #

1. 修正组件导入语句 #

找到Game.tsx中导入Input组件的代码，将错误路径替换为实际的别名路径：

// 替换前
import Input from '/src/components/ui/input'

// 替换后（二选一）
import Input from '@/components/ui/input'
// 若工具链不支持自动补全后缀，可写全路径
import Input from '@/components/ui/input.tsx'

2. 确认路径别名配置 #

确保构建工具已将@映射到src目录：

• Vite项目：在vite.config.ts中添加配置：

  import { defineConfig } from 'vite'
  import path from 'path'
  
  export default defineConfig({
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    }
  })
  

• Webpack项目：在webpack.config.js中添加配置：

  const path = require('path')
  
  module.exports = {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
  

3. 配置TypeScript路径（TS项目必做） #

在tsconfig.json的compilerOptions中添加路径映射，让TypeScript识别@别名：

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

4. 重启开发服务 #

修改配置文件后，重启开发服务器（如执行npm run dev），让新配置生效。

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