Vite 构建时通过 generateBundle 钩子收集 asset/chunk 资源并写入 dist/manifest.json，public 文件需额外扫描合并，用于 SSR 注入、部署校验与灰度发布。
构建时自动生成静态资源清单，核心是利用 Vite 的构建钩子（buildEnd）配合 Rollup 的 output.generateBundle 钩子，在打包完成前收集所有产出的静态资源路径与哈希信息，并写入 JSON 文件。
使用 rollupOptions.output.manualChunks + generateBundle 钩子
Vite 基于 Rollup 构建，可在 vite.config.ts 中通过 build.rollupOptions.output 的 generateBundle 钩子捕获最终生成的 chunk 和 asset：
- 该钩子接收
bundle对象，包含所有输出文件名、类型（chunk / asset）、源码或引用路径 - 过滤出
type === 'asset'或type === 'chunk'中带哈希的 JS/CSS/字体/图片等资源 - 提取
fileName、source（可选）、isEntry等字段，构建成结构化清单 - 用
fs.writeFileSync将清单写入dist/manifest.json（需确保dist目录已存在）
配置示例：生成 manifest.json
在 vite.config.ts 中添加：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
import { defineConfig } from 'vite';
import fs from 'fs';
import path from 'path';
export default defineConfig({
build: {
rollupOptions: {
output: {
// 可选：统一资源输出目录，便于识别
assetFileNames: 'assets/[name].[hash].[ext]',
chunkFileNames: 'js/[name].[hash].js',
entryFileNames: 'js/[name].[hash].js',
// 关键：在 bundle 生成后写入清单
manualChunks: undefined, // 不影响默认分包逻辑
generateBundle(_, bundle) {
const manifest: Record<string, { file: string; src?: string }> = {};
for (const [fileName, file] of Object.entries(bundle)) {
if (file.type === 'asset' || (file.type === 'chunk' && file.isEntry)) {
manifest[fileName] = {
file: fileName,
src: 'source' in file ? String(file.source?.slice(0, 50)) : undefined
};
}
}
const manifestPath = path.resolve(__dirname, 'dist', 'manifest.json');
fs.mkdirSync(path.dirname(manifestPath), { recursive: true });
fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
}
}
}
}
});
区分 public 目录资源与构建产物
注意：public/ 下的文件（如 favicon.ico、robots.txt）不会出现在 bundle 中，它们被原样复制。若需纳入清单，需额外读取 public 目录并合并：
立即学习“Java免费学习笔记（深入）”；
- 在
buildEnd钩子中用fs.readdirSync('public')扫描文件 - 将
public/**路径映射为根路径下同名 URL（如/favicon.ico） - 合并进 manifest，避免遗漏关键静态入口
配合服务端使用的建议
生成的 manifest.json 可用于：
- 服务端渲染（SSR）时按需注入正确资源路径，替代硬编码
- CDN 部署时校验上传完整性（比对文件哈希）
- 灰度发布中动态加载特定版本 CSS/JS
- 前端监控上报资源加载失败时，快速定位是否为清单未更新导致的路径错配
