public 目录与静态资源

public 目录存放不需要 Vite 处理的静态资源，构建时直接复制到输出目录。

public 目录特点

特点	说明
不经处理	文件不经过 Vite 编译转换
直接复制	构建时复制到 dist 根目录
绝对引用	使用绝对路径 `/xxx` 引用

目录结构

HTML

project/
├── public/
│   ├── favicon.ico
│   ├── robots.txt
│   └── images/
│   └── banner.png
├── src/
└── index.html

引用方式

JavaScript

<!-- index.html 中引用 -->
<link rel="icon" href="/favicon.ico" />
<img src="/images/banner.png" />

<!-- JS 中引用 -->
const imageUrl = '/images/banner.png'

注意：public 资源使用绝对路径 /xxx 引用，不使用相对路径。

public 与 src/assets 区别

对比项	src/assets	public
处理方式	经 Vite 处理	不处理直接复制
引用方式	导入或相对路径	绝对路径 `/xxx`
文件哈希	有哈希后缀	保持原名
适用场景	需处理的资源	固定名称的资源

适用场景

favicon.ico 网站图标
robots.txt SEO 文件
manifest.json PWA 配置
不需哈希的静态文件
第三方库的静态资源

配置 public 目录

text

export default defineConfig({
  publicDir: 'public'  // 默认值
})

要点总结

public 目录存放不需处理的资源
使用绝对路径 /xxx 引用
构建时直接复制到 dist
适合 favicon、robots.txt 等固定文件

📝 发现内容有误？点击此处直接编辑