发布新的Vue应用程序版本时如何清除chrome中的缓存

Posted 2023-02-16

【中文标题】发布新的Vue应用程序版本时如何清除chrome中的缓存

【英文标题】：How to clear cache in chrome when release new Vue app version

【发布时间】：2021-04-23 23:25:56

【问题描述】：

在 vue-cli 中创建了一个应用程序，然后我构建了 dist 文件夹以使用新的应用程序版本进行生产。 当我必须进行一些更改并且我必须重做部署时，就会出现问题。在此之后，应用程序不适用于更新版本，但如果我清除特定站点的站点设置中的 chrome 缓存，该应用程序将再次正常工作。 该应用程序部署在 Firebase 托管上。 发布新vue版本时清除chrome缓存的解决方案？

【问题讨论】：

这能回答你的问题吗？ Force cache refresh after deployment

我已更新您的标签以包含 firebase，因为这是一个托管/服务器端问题，您可能会在那里得到更好的答案。

【参考方案1】：

“智能”缓存可以通过服务器端技术来完成。如果您可以访问它并且可以管理缓存类型，则可以将其设置为使用etag，我发现它非常可靠。

使用 webpack 捆绑的 Vue 应用程序将生成带有哈希的文件名。因此，如果应用程序或块（如果您要进行代码拆分）有任何不同，则生成的文件名将有所不同。但问题是index.html 将保持相同的名称。因此，如果您可以单独为该文件设置正确的缓存选项，那将解决您的大部分问题。或者，如果您担心从缓存加载页面，您可以设置非常短的缓存时间或根本不缓存（因为它应该是一个小文件）。但是问题仍然存在，这部分缓存功能完全超出了 vue 应用的范围。

看起来你可以编辑配置并为每个资源设置标题ref

所以你可以为 css 和 js 设置一个长的max-age，并为index.html 设置一个短的，就像这样......

    "headers": [ 
      "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
      "headers": [ 
        "key": "Access-Control-Allow-Origin",
        "value": "*"
       ]
    , 
      "source": "**/*.@(jpg|jpeg|gif|png|js|css)",
      "headers": [ 
        "key": "Cache-Control",
        "value": "max-age=7200"
       ]
    , 
      "source": "index.html",
      "headers": [ 
        "key": "Cache-Control",
        "value": "max-age=300"
       ]
     ],