Vue和Webpack的Firebase SPA托管缓存问题

编程问答 2022-06-12

问题描述

我们在Firebase托管网站上进行缓存时遇到一些问题。 index.html是为用户缓存的，在我们推送新内容后不会更新。 js和css文件都会自动散列在index.html中，但是当客户访问我们的网站时index.htlm不会刷新。我还有一个名为 precache-manifest.a6 .... .js

的文件

可能是什么问题？

firebase.json 

"headers": [
        {
          "source": "/**","headers": [
            {
              "key": "Cache-Control","value": "no-cache,no-store,must-revalidate"
            }
          ]
        },{
          "source":
            "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)","value": "max-age=604800"
            }
          ]
        }
      ],"rewrites": [
        {
          "source": "**","destination": "/index.html"
        }
      ]
    },

构建后经过修饰的index.html文件 

<!DOCTYPE html>
<html lang=en>
    <head>
        <Meta charset=utf-8>
        <Meta http-equiv=X-UA-Compatible content="IE=edge">
        <Meta name=viewport content="width=device-width,initial-scale=1">
        <!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel=stylesheet>
        <title>Website title</title>
        <link href=/css/bli-medlem.217d1a3a.css rel=prefetch>
        <link href=/css/bli-medlem~medlemskap~mina-sidor~nyheter.c3edd915.css rel=prefetch>
        <link href=/css/contact.aaef28c3.css rel=prefetch>
        <link href=/css/faq.66e4b136.css rel=prefetch>
        <link href=/css/foretag.a912a4ce.css rel=prefetch>
        <link href=/css/medlemskap.7ba35399.css rel=prefetch>
        <link href=/css/mina-sidor.902124d4.css rel=prefetch>
        <link href=/css/nyheter.32d52703.css rel=prefetch>
        <link href=/css/regler-villkor.19eaaf7e.css rel=prefetch>
        <link href=/css/traningscenter.5ae254fb.css rel=prefetch>
        <link href=/js/bli-medlem.a5413da7.js rel=prefetch>
        <link href=/js/bli-medlem~medlemskap~mina-sidor~nyheter.7f311fca.js rel=prefetch>
        <link href=/js/contact.53cfd426.js rel=prefetch>
        <link href=/js/faq.57a07ff8.js rel=prefetch>
....

precache-manifest.a6269f7857e1a2c08f4efd9406507eb6.js 

self.__precacheManifest = [
  {
    "revision": "fbde61f4af3a754fadfae2ac1bf12425","url": "/img/swish-iphone-old.fbde61f4.png"
  },{
    "revision": "b6216d61c03e6ce0c9aea6ca7808f7ca","url": "/robots.txt"
  },{
    "revision": "717f8f924c3b5d5decc417440d110c62","url": "/img/swish-primary-large.717f8f92.png"
  },{
    "revision": "0d291790bbee03c84a97","url": "/css/bli-medlem.217d1a3a.css"
  },{
    "revision": "a7008c28e5dc4f5a12e4","url": "/css/bli-medlem~medlemskap~mina-sidor~nyheter.c3edd915.css"
  },"url": "/js/bli-medlem~medlemskap~mina-sidor~nyheter.7f311fca.js"
  },{
    "revision": "0c6a607dd3e3675e8c42","url": "/css/chunk-vendors.6497ef22.css"
  },"url": "/js/chunk-vendors.90540379.js"
  },.....

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

browser-cachecachingcachingfirebasefirebasefirebasehtmlvue.js