Vite 静态资源处理
区分 import 静态资源与 public 目录资源在哈希、路径解析与使用场景上的差异。
#type / concept
#status / growing
#tech / dev / frontend
#resource / javascript
[!info] 关联笔记
Vite 静态资源处理
这个概念为什么出现
同一 logo 放错通道会导致：生产 404、无法内容哈希缓存、或 SSR/CDN 路径错误。
[!abstract] 一句话理解
import资源进入模块图并可哈希；public/原样拷贝，按绝对 URL 引用。
对照
| 方式 | 适合 | 行为 |
|---|---|---|
import url from './logo.svg' | 组件内资源 | 参与构建与指纹 |
public/favicon.ico → /favicon.ico | 固定 URL | 原样复制 |
?raw/?url 等 | 特殊导入 | 按文档查询后缀 |
场景
- 按钮图标：import 或 SVG 组件
robots.txt/favicon：public- 需要内联字符串：按官方查询语法
本节总结
先问“要不要哈希与模块跟踪”，再选资源通道。
自测题
- 为什么 public 资源名通常不含 content hash？
参考答案
它们按原名复制，适合稳定 URL；缓存刷新需自行改名或网关策略。