VueJs 部署问题：Chrome 缓存旧版本，不更新应用

Posted 2023-02-19

【中文标题】VueJs 部署问题：Chrome 缓存旧版本，不更新应用

【英文标题】：VueJs Deployment Problem: Chrome caches old version and not updating app

【发布时间】：2021-09-13 07:24:14

【问题描述】：

我在部署项目时遇到问题。 这是VueJs 项目，一个网络应用程序，构建在带有 Vuetify 组件的 Metronic 模板之上。 当我发布时，我使用 npm run build 的 Visual Studio 代码并将 dist 文件夹上传到我的服务器。 我有一个版本检查问题。 如果不重新加载，我的一些客户无法获得最新版本。 ctrl-shift-r 他们正在使用 chrome，当启用隐身模式时，一切都很完美。但是普通模式带来了一个非常旧的应用程序版本。 我需要代码或服务器端的解决方案，谢谢您的帮助

【问题讨论】：

在代码中可能没有办法，您可能需要更新构建脚本以某种方式生成不同版本的文件，因此构建后，您可以重命名文件或尝试每次添加版本。然后上传文件夹，这就是一般FE应用程序避免文件缓存的方式。

【参考方案1】：

我解决了我的问题，但我忘了发布我的答案。我的问题是因为我在项目开始时安装并实现的 PWA 包。

当我尝试从我的项目中删除 PWA 时，我所做的是注释代码块但没有从我的 packacge.json 中删除依赖项。（错误）所以，我在想，*“因为我没有调用任何PWA 函数或对其进行初始化，它应该已被删除。” 是的，不是。 它还在那里，缓存着东西。 所以我从我的 packacge.json 中删除（卸载）了依赖项，即使在那之后，之前安装过 PWA 并且 “未正确卸载” 的人仍在使用缓存！ （是的，您必须单击卸载并检查删除文件选项） 所以我不得不从他们的 chrome 中手动卸载我的 PWA 应用程序（谢天谢地它只有少数）并且问题解决了。