public/ 目录

public/ 目录用于存放不需要构建处理的静态资源文件，它们会被原样复制到输出目录。

为什么需要 public/？

有些文件你不想让 Vite 处理：

文件	为什么不需要构建处理
`favicon.ico`	浏览器直接请求，需要固定路径 `/favicon.ico`
`robots.txt`	搜索引擎爬虫直接请求，不能改文件名
`sitemap.xml`	同上，固定路径
`og-image.png`	社交媒体分享图，URL 需要固定

如果放在 assets/ 里，Vite 会给文件名加哈希（如 favicon.3a4b.ico），导致浏览器和爬虫找不到。

特点

文件通过 URL 根路径直接访问
不经过 Vite 构建，不哈希文件名
适合存放不变的、需要固定 URL 的文件

目录结构

text

public/
├── favicon.ico        → /favicon.ico
├── robots.txt         → /robots.txt
├── sitemap.xml        → /sitemap.xml
├── images/
│   └── og-image.png   → /images/og-image.png
└── fonts/
    └── icon.woff2     → /fonts/icon.woff2

URL 映射规则

public/ 目录下的文件，URL 路径就是从 public/ 之后的路径。如 public/images/og-image.png → /images/og-image.png。

在代码中引用

vue

<template>
  <!-- 使用绝对路径（以 / 开头） -->
  <img src="/images/og-image.png" alt="OG Image" />
</template>

<head>
  <!-- favicon 也是直接引用 -->
  <link rel="icon" href="/favicon.ico" />
</head>

为什么用 / 而不是 ~/？

public/ 下的文件不走构建流程，~ 路径别名是 Vite 的功能
它们在部署后就在网站根目录下，直接用 / 绝对路径访问
记住：assets/ 用 ~/，public/ 用 /

public/ vs assets/

特性	public/	assets/
构建处理	❌ 不处理，原样复制	✅ Vite 处理（压缩、优化）
文件名哈希	❌ 保持原名	✅ 内容哈希（如 `logo.3a4b.png`）
引用方式	绝对路径 `/`	相对路径 `~/assets/`
Tree-shaking	❌ 全部打包，不管用没用	✅ 未使用的不会打包
缓存策略	手动管理	哈希文件名自动破缓存
适用场景	favicon、robots.txt	CSS、需要优化的图片

文件名哈希有什么用？

当你更新了一张图片，如果文件名不变，浏览器可能使用缓存中的旧版本。assets/ 下的文件会自动加哈希（如 logo.3a4b.png），内容变了哈希就变，浏览器会自动加载新版本。

public/ 的文件没有哈希，所以如果你更新了 public/images/og-image.png，用户可能还看到旧版本。解决方案：手动在文件名加版本号（如 og-image-v2.png）。

适合放在 public/ 的文件

文件	原因
`favicon.ico`	浏览器固定请求 `/favicon.ico`
`robots.txt`	搜索引擎爬虫固定请求 `/robots.txt`
`sitemap.xml`	同上
`og-image.png`	社交平台固定 URL 抓取
`_redirects`	Netlify 重定向规则
`_headers`	Cloudflare 头部规则
不需要优化的静态文件	如已经压缩好的字体文件

不适合放在 public/ 的文件

文件	应该放哪	原因
需要压缩的图片	`assets/` + `<NuxtImg>`	Vite 会自动压缩优化
CSS 文件	`assets/`	需要构建处理
需要版本控制的文件	`assets/`	会自动哈希，缓存自动更新
大量图片	考虑 CDN	不应该打包进项目，用外部 CDN

常见问题

public/ 下的文件访问 404

确认文件确实在 public/ 目录下
确认 URL 路径正确（不要包含 public/ 本身）
开发模式下重启服务器
构建后检查 .output/public/ 目录是否有该文件

更新了文件但浏览器显示旧版本

这是缓存问题。public/ 的文件名不变，浏览器会使用缓存。解决方案：

开发：Ctrl+Shift+R 强制刷新
生产：给文件名加版本号（如 og-image-v2.png）
更好的方案：把这类文件移到 assets/，让 Vite 自动管理缓存

public/ 目录 ​

为什么需要 public/？ ​

特点 ​

目录结构 ​

在代码中引用 ​

public/ vs assets/ ​

适合放在 public/ 的文件 ​

不适合放在 public/ 的文件 ​

常见问题 ​

public/ 下的文件访问 404 ​

更新了文件但浏览器显示旧版本 ​