Vue 3 缓存清除实战：确保用户始终访问最新版 Web App

type

status

date

slug

summary

一、什么是缓存清除 (Cache Busting)？

缓存清除是一种关键技术，旨在克服浏览器缓存导致内容过时的问题。它通过有意地使静态资源失效或对其进行版本控制，来强制浏览器在资源发生变更时获取最新的副本。

二. 缓存清除的核心目的

确保内容最新：缓存清除的核心目标是确保用户始终能够接收和使用到 Web App 的最新版本。没有有效的缓存清除机制，用户可能会因为浏览器持续提供旧的缓存资源，而无法体验到新功能、已修复的BUG或全新的设计。

优化用户体验 (UX)：通过保证用户访问的是最新、最完善的 Web App 版本，缓存清除能够显著提升整体用户体验。用户将受益于改进的性能，并能与开发者所做的最新迭代保持同步。

三、缓存清除的常见机制

缓存清除的实现通常涉及在静态资源更新时更改其文件名或URL。常见的策略包括：

文件查询字符串版本控制 (Query String Versioning)：在文件名后附加一个唯一的版本标识符作为查询参数（例如 styles.css?v=1.2.3 或 styles.css?t=1678886400）。浏览器会将不同版本号的URL视为不同的资源，从而在版本更新时下载新文件。

内容哈希命名 (Content Hashing)：根据文件内容的哈希值生成文件名的一部分（例如 styles.abcd123.css）。这是一种非常可靠的方法，因为即使对文件进行微小的更改，也会产生新的哈希值，进而生成新的文件名，浏览器自然会将其视为新资源。现代构建工具（如 Vite, Webpack）通常内置了这种能力。

本文将介绍一种基于 meta.json 文件和自定义脚本的缓存清除策略，适用于Vue 3项目。

四、在 Vue 3 中实现缓存清除的具体步骤

1. 将 `meta.json` 添加到 `public` 文件夹

首先，在项目的 public 文件夹中创建一个名为 meta.json 的文件。这个文件将用于存储当前部署版本和上一个版本的信息，以便客户端代码在运行时可以访问并进行比较。

meta.json 的内容结构示例：

将 meta.json 放置在 public 文件夹中，可以确保它在项目构建后被复制到输出目录的根路径，从而使得客户端代码能够通过简单的HTTP请求（如 /meta.json）在运行时获取到它。

其核心思想是，在应用加载时，客户端获取这个 meta.json 文件，并将其中的版本号与客户端自身可能记录的（例如存储在localStorage中的）“当前已知版本”或一个预期版本进行比较。如果检测到版本不一致（特别是服务器上的 meta.json 版本更新），则触发强制刷新或提示用户更新的操作，以确保用户体验到最新的应用内容。

(原作者提到将package.json版本与meta.json版本比较，这通常是在构建流程中，由脚本更新meta.json来实现的，确保部署的meta.json反映了最新的构建版本。)

2. 设置 `generate-build-version.js` 脚本

缓存清除过程的核心在于一个自动化脚本，该脚本负责：

读取当前 package.json 中的版本号。

基于特定规则（如语义化版本）生成一个新的构建版本号。

用新版本号更新 package.json 文件。

创建或更新 public/meta.json 文件，记录新版本号和旧版本号。

以下是一个示例 generate-build-version.js 脚本：

这个脚本自动化了版本控制过程，确保每次构建都会适当地增加版本号并更新相关文件。这为后续在应用生命周期中有效进行缓存清除奠定了基础。 改进建议：对于版本号的递增，更推荐使用 semver 库的 semver.inc(currentAppVersion, 'patch' | 'minor' | 'major' | 'prerelease', 'beta') 等方法，它能更规范地处理版本号的增加。