vite通过contenthash实现资源文件名随内容自动更新，js/css默认带哈希，图片等需用new url(..., import.meta.url)获取带哈希路径，public目录文件不参与哈希，index.html须禁用强缓存确保加载最新版本。

核心是让资源文件名随内容变化而自动更新，浏览器靠新路径自然加载新版，不用清缓存或硬刷新。

JS/CSS 文件默认带 contenthash

Vite 构建时对 src 目录下产出的 JS、CSS 文件，默认就基于内容生成哈希，比如 `index.e9a2f3b4.js`。这个行为开箱即用，无需额外配置。只要代码或样式变了，哈希值就变，文件名也变，CDN 和浏览器缓存会视为全新资源。

图片等静态资源需手动构造 URL

放在 `src/assets` 下的图片、字体等，Vite 会自动哈希并重命名（如 `logo.7d8a1c2f.png`），但动态引入时不能用 `require()`（Vite 不支持）。正确写法是：

在组件中用 new URL(..., import.meta.url) 获取带哈希的路径：

php版微信js-sdk支付接口类

php版微信js-sdk支付接口类

下载

• const iconUrl = new URL(`./icons/${name}.svg`, import.meta.url).href
• 模板里直接绑定：<img :src="iconUrl">

这样得到的 URL 已含内容指纹，且参与构建哈希流程。

public 目录文件不参与哈希

`public/` 下的文件（如 `favicon.ico`、`robots.txt`）原样复制到输出目录，名字不变，也不加 hash。适合放长期不变、无需版本控制的资源。如果这类文件需要更新，就得靠服务端设置短缓存或手动改名。

确保 index.html 不缓存

HTML 文件必须禁用强缓存，否则用户可能一直访问旧版，导致新 JS/CSS 路径不被加载。常见做法是：

• 构建后把 `index.html` 的 Cache-Control 设为 no-cache 或 max-age=0
• 配合服务器配置，例如 Nginx 中对 index.html 返回 Cache-Control: no-store

它本身不带 hash，但内容会随构建更新，所以靠禁止缓存来保证每次拉取最新版本。 不复杂但容易忽略