Vite 项目部署到 Vercel 后图片 404，根本原因常在于静态资源引用方式错误：public 目录下文件必须用根路径（如 /logo.png）访问，而非 src 中相对路径或含 public/ 前缀的写法。
vite 项目部署到 vercel 后图片 404，根本原因常在于静态资源引用方式错误：`public` 目录下文件必须用根路径（如 `/logo.png`）访问，而非 `src` 中相对路径或含 `public/` 前缀的写法。
在 Vite 构建体系中，public 目录是一个特殊区域——其内部所有文件会在构建时原样复制到最终输出目录（如 dist/）的根路径下，不经过打包、哈希或路径重写处理。这意味着：
✅ 正确行为：<img src="/serch.png"> → 浏览器向 https://your-app.vercel.app/serch.png 发起请求，Vercel 直接返回 public/serch.png；
❌ 错误行为：<img src="public/static/images/serch.png"> 或 <img src="./static/images/serch.png"> → 浏览器尝试加载不存在的嵌套路径，返回 404。
✅ 正确配置步骤（以你的 To-Do 项目为例）
-
整理
public目录结构
推荐扁平化管理（避免深层嵌套），例如：public/ ├── serch.png ├── check.svg └── logo.svg
若需保留分类，也可使用一级子目录（如
public/images/），但务必统一路径逻辑。 -
在组件中使用绝对根路径引用
// ✅ 正确：根路径引用（Vercel 可直接命中） @@##@@ // ✅ 正确：带子目录的根路径（若你坚持用 public/images/） @@##@@ // ❌ 错误：含 `public/` 前缀（浏览器会解析为 /public/serch.png，但该路径不存在） @@##@@ // ❌ 错误：相对路径（Vite 不处理 public 内文件的相对解析） @@##@@
-
验证构建输出
运行npm run build后检查dist/目录内容：ls dist/ # 应看到：index.html, assets/, serch.png, check.svg ← 证明 public 文件已正确拷贝至根
若
dist/中缺失图片，则检查vite.config.ts是否误配置了publicDir（默认为'public'，勿修改）。
⚠️ 常见误区与注意事项
-
不要混用
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 引入） |
| 组件中引用方式 | @@##@@ |
@@##@@ |
| 构建后文件存在性 |
dist/serch.png 存在 |
dist/public/serch.png（多余嵌套） |
| 路径大小写 |
/logo.svg（文件名全小写） |
/Logo.svg（Linux/Vercel 区分大小写） |
完成以上修正后重新运行 npm run build && vercel --prod，图片即可正常加载。记住核心原则：public 目录即网站根目录的镜像，一切引用皆从 / 开始。
