Vue-CLI和Vite均通过contenthash实现静态资源长期缓存与自动更新：Vue-CLI依赖webpack配置filename/chunkFilename含[contenthash]，Vite默认启用并支持rollupOptions自定义；二者均需服务端对带hash资源设max-age=31536000、index.html设no-cache。
Vue-CLI 和 Vite 都支持通过构建配置自动为静态资源生成带哈希的文件名，从而实现长期缓存（Cache-Control: max-age=31536000）与版本更新的平衡。核心不是“手动清缓存”，而是让浏览器在资源变更时自然请求新文件。
Vue-CLI：靠 webpack 的 output.filename 配置生成哈希文件名
Vue-CLI 3+ 默认已启用该机制，无需额外插件。关键在于确保 production 环境下 filename 和 chunkFilename 含 [contenthash]：
- 在 vue.config.js 中可显式确认（默认已配好）：
module.exports = {
configureWebpack: {
output: {
filename: 'js/[name].[contenthash:8].js',
chunkFilename: 'js/[name].[contenthash:8].js'
}
}
}- [contenthash] 基于文件内容生成，内容变则 hash 变，浏览器会认为是新资源；
- index.html 中的 script/link 标签由 html-webpack-plugin 自动注入带 hash 的路径，保证引用准确；
- 注意：若用 CDN 托管静态资源，需同步上传带 hash 的文件，并确保 public 目录下的资源（如 favicon.ico）不参与 hash —— 它们走的是 public/ 静态拷贝逻辑，不经过 webpack 处理。
Vite：默认开启 contentHash，配置更简洁
Vite 2.0+ 在生产构建中默认启用基于内容的哈希命名，无需额外插件。你只需关注输出结构和 CDN 场景下的路径修正：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 构建后 assets 目录下 JS/CSS 文件名自带 8 位 contenthash，例如 index.e9a2f3b4.js；
- 如需自定义，可在 vite.config.ts 中设置：
export default defineConfig({
build: {
rollupOptions: {
output: {
entryFileNames: `assets/[name].[hash].js`,
chunkFileNames: `assets/[name].[hash].js`,
assetFileNames: `assets/[name].[hash].[ext]`
}
}
}
})- 若部署到子路径或 CDN，务必配好 base 选项（如 base: 'https://cdn.example.com/my-app/'），否则 HTML 中资源路径会出错；
- Vite 不处理 public/ 下文件，它们原样复制，适合放 robots.txt、sitemap.xml 等不需缓存控制的资源。
服务端配合：设置强缓存头 + index.html 协商缓存
前端生成带 hash 的文件只是第一步，服务端响应头决定浏览器是否真正缓存：
立即学习“前端免费学习笔记（深入）”；
- JS/CSS/图片等带 hash 的资源：返回 Cache-Control: public, max-age=31536000（1年），CDN 和浏览器都会长期缓存；
- index.html：必须禁用强缓存，推荐 Cache-Control: no-cache 或 max-age=0, must-revalidate，确保每次访问都向服务器验证（如 ETag 或 Last-Modified），拿到最新 HTML 后再加载对应 hash 资源；
- Nginx 示例片段：
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
location = /index.html {
add_header Cache-Control "no-cache";
}避免常见陷阱
- 不要用 [hash] 或 [chunkhash]：Vite 不支持，Vue-CLI 中 [hash] 是构建级 hash，所有文件共用一个值，失去精准缓存意义；
- 动态 import() 的 chunk 名称不会影响 hash：只要模块内容不变，即使 import() 的字符串路径变化（如变量拼接），webpack/Vite 仍能正确计算 contenthash；
- 第三方库未更新但包版本号变了？ 检查是否启用了 cacheGroups（Vue-CLI）或 manualChunks（Vite），避免因依赖版本微调导致 vendor hash 频繁变动；
- 本地开发时缓存无关紧要，所有配置只在 NODE_ENV=production 生效。
