Vue 部署上线清除浏览器缓存

Posted 2023-04-17

参考技术A vue 项目打包上线之后，每一次都会有浏览器缓存问题，需要手动的清除缓存。这样用户体验非常不好，所以我们在打包部署的时候需要尽量避免浏览器的缓存。

如何在启动更新版本的应用程序时清除浏览器缓存？

我正在部署我的UI应用程序，它由AngularJS，Grunt和其他UI东西组成。

每当我更新我的UI并使用apache-tomcat重新部署它时，浏览器总是从缓存中获取我的资源。 （作为css，html等新资源的路径相同）

用户需要执行CTRL + F5（硬重载）来清除缓存并使用新资源。

当我重新部署应用程序时，如何强制浏览器清除缓存？

如果不知何故我可以使用angular + grunt来完成这项任务，也可以。

每次重新部署产品时，我都不想更新文件的版本。由于我的文件内部下载了许多html文件。

所以我想以某种方式清除浏览器缓存。

谢谢！

答案

您可以在html文件中添加版本

app.factory('preventTemplateCache', function () {
    return {
        'request': function (config) {
            if (config.url.indexOf('partials') !== -1) {
                config.url = config.url + '?t=' + 101;
            }
            return config;
        }
    }
})

并将.js文件的版本作为

 <script src='app.js?v=101'></script>

101是版本号

另一答案

如果没有文件名版本控制，则无法更新缓存。但您不必手动完成。如果您使用Grunt，只需查看一些npm包。像这样的例子：https://www.npmjs.com/package/grunt-cache-breaker

在重建时，它将为您的资源创建新的哈希值，并将它们注入到您的html文件中。因此，当您的用户下载您的html文件（它们被下载，它们没有被缓存）时，这些html文件将包含具有新名称的css和js等资源，因此浏览器将强制下载而不是从内存中获取这些文件。