Vite 静态资源处理
区分 import 静态资源与 public 目录资源在哈希、路径解析与使用场景上的差异。
#concept
#growing
#frontend
#javascript
[!info] related notes
Vite 静态资源处理
这个概念为什么出现
同一 logo 放错通道会导致：生产 404、无法内容哈希缓存、或 SSR/CDN 路径错误。
[!abstract] 一句话理解
import资源进入模块图并可哈希；public/默认原样拷贝，引用时需考虑部署 base。
对照
| 方式 | 适合 | 行为 |
|---|---|---|
import url from './logo.svg' | 组件内资源 | 返回 URL；小资源可内联为 data URL，否则通常输出带哈希文件 |
public/favicon.ico → /favicon.ico（根部署） | 固定文件名 | 原样复制，不自动加哈希 |
?raw/?url 等 | 特殊导入 | 按文档查询后缀 |
base: '/inventory/' 部署时，业务 JS 中拼接 public 路径可用 import.meta.env.BASE_URL + 'favicon.ico'，不要写 /public/favicon.ico。Vite 会调整处理过的 HTML、CSS 和资源 import，但不会替所有运行时字符串推导 base。
普通 SVG import 得到 URL，转换成组件需框架兼容插件。new URL('./logo.svg', import.meta.url) 适用于可静态分析的客户端相对资源；任意变量路径与 SSR 的服务器 URL 语义不能直接照搬。
场景
- 按钮图标：import 或 SVG 组件
robots.txt/favicon：public- 需要内联字符串：按官方查询语法
本节总结
先问“要不要哈希与模块跟踪”，再选资源通道。
自测题
- 为什么 public 资源名通常不含 content hash？
参考答案
它们按原名复制，适合稳定 URL；缓存刷新需自行改名或网关策略。
Digital Biome