Vite 项目部署到 Vercel 后图片 404，根本原因常在于静态资源引用方式错误：public 目录下文件必须用根路径（如 /logo.png）访问，而非 src 中相对路径或含 public/ 前缀的写法。

vite 项目部署到 vercel 后图片 404，根本原因常在于静态资源引用方式错误：`public` 目录下文件必须用根路径（如 `/logo.png`）访问，而非 `src` 中相对路径或含 `public/` 前缀的写法。

在 Vite 构建体系中，public 目录是一个特殊区域——其内部所有文件会在构建时原样复制到最终输出目录（如 dist/）的根路径下，不经过打包、哈希或路径重写处理。这意味着：
✅ 正确行为：<img src="/serch.png" alt="Vite + Vercel 静态图片资源加载失败的根源与正确实践" > → 浏览器向 https://your-app.vercel.app/serch.png 发起请求，Vercel 直接返回 public/serch.png；
❌ 错误行为：<img src="public/static/images/serch.png" alt="Vite + Vercel 静态图片资源加载失败的根源与正确实践" > 或 <img src="./static/images/serch.png" alt="Vite + Vercel 静态图片资源加载失败的根源与正确实践" > → 浏览器尝试加载不存在的嵌套路径，返回 404。

✅ 正确配置步骤（以你的 To-Do 项目为例）

1. 整理 public 目录结构
   推荐扁平化管理（避免深层嵌套），例如：

   public/
   ├── serch.png
   ├── check.svg
   └── logo.svg

   若需保留分类，也可使用一级子目录（如 public/images/），但务必统一路径逻辑。

2. 在组件中使用绝对根路径引用

   // ✅ 正确：根路径引用（Vercel 可直接命中）
   <img src="/serch.png" alt="Search" className="ml-4 w-6 h-6 cursor-pointer" />
   
   // ✅ 正确：带子目录的根路径（若你坚持用 public/images/）
   <img src="/images/check.svg" alt="Done" />
   
   // ❌ 错误：含 `public/` 前缀（浏览器会解析为 /public/serch.png，但该路径不存在）
   <img  src="public/serch.png" / alt="Vite + Vercel 静态图片资源加载失败的根源与正确实践" >
   
   // ❌ 错误：相对路径（Vite 不处理 public 内文件的相对解析）
   <img  src="../public/serch.png" / alt="Vite + Vercel 静态图片资源加载失败的根源与正确实践" >

3. 验证构建输出
   运行 npm run build 后检查 dist/ 目录内容：

   ls dist/
   # 应看到：index.html, assets/, serch.png, check.svg ← 证明 public 文件已正确拷贝至根

   若 dist/ 中缺失图片，则检查 vite.config.ts 是否误配置了 publicDir（默认为 'public'，勿修改）。

   

   VitePress Generator

   使用 VitePress 快速生成静态网站，支持安装依赖、初始化项目、本地预览、构建和部署。

   下载

⚠️ 常见误区与注意事项

• 不要混用 src/assets/ 与 public/：

  • src/assets/ 中的图片会被 Vite 打包（生成哈希名如 assets/logo.abc123.png），适合需要缓存控制或按需加载的场景；
  • public/ 仅用于无需构建处理的静态资源（如 favicon、robots.txt、第三方 SDK 的未压缩 JS/CSS），且必须用 /xxx 访问。

• Vercel 部署无须额外配置 vercel.json（除非有路由重写需求）：
  默认情况下，Vercel 会将所有 /xxx 请求优先匹配 dist/ 下的静态文件（包括 public 拷贝内容）。只要 dist/ 中存在对应文件，即可直接访问。

• 本地开发与部署行为一致：
  vite dev 也遵循相同规则——/serch.png 指向 public/serch.png。若本地能显示而线上 404，99% 是因构建产物未包含该文件（检查 dist/）或路径书写错误（大小写敏感！Serch.png ≠ serch.png）。

? 快速自检清单

检查项	正确示例	错误示例
图片存放位置	public/serch.png	src/assets/serch.png（未通过 import 引入）
组件中引用方式	<img src="/serch.png" alt="Vite + Vercel 静态图片资源加载失败的根源与正确实践" >	<img src="public/serch.png" alt="Vite + Vercel 静态图片资源加载失败的根源与正确实践" >
构建后文件存在性	dist/serch.png 存在	dist/public/serch.png（多余嵌套）
路径大小写	/logo.svg（文件名全小写）	/Logo.svg（Linux/Vercel 区分大小写）

完成以上修正后重新运行 npm run build && vercel --prod，图片即可正常加载。记住核心原则：public 目录即网站根目录的镜像，一切引用皆从 / 开始。