提问者:小点点

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


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


共1个答案

匿名用户

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

使用webpack捆绑的Vue应用程序将生成带有哈希的文件名。因此,如果应用程序或区块(如果您正在拆分代码)中有任何不同,则生成的文件名将不同。问题是索引。html将保持相同的名称。因此,如果您可以单独为该文件设置正确的缓存选项,则可以解决大多数问题。或者,如果担心从缓存加载页面,可以设置很短的缓存时间或根本不缓存(因为它应该是一个小文件)。但问题仍然是,vue应用程序完全无法实现缓存功能的这一部分。

看起来您可以使用firebase编辑配置并设置每个资源引用的标题

因此,您可以为css和js设置一个长max age,并为索引设置一个短值。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"
      } ]
    } ],