如何利用插件自动处理静态资源缓存？Vue-CLI 与 Vite 的缓存配置-Vue.js-PHP中文网

Vue-CLI和Vite均通过contenthash实现静态资源长期缓存与自动更新：Vue-CLI依赖webpack配置filename/chunkFilename含[contenthash]，Vite默认启用并支持rollupOptions自定义；二者均需服务端对带hash资源设max-age=31536000、index.html设no-cache。

如何利用插件自动处理静态资源缓存？vue-cli 与 vite 的缓存配置

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 生效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！