前端发布的文件在浏览器和小程序缓存不会自动刷新

rainmanhhh
  • 2
新手上路,请多包涵

用vite打包的vue3项目,生成的index.html如下(部署在nginx)

<!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <title></title>
  <base href="./">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="msapplication-TileColor" content="#00aba9">
  <meta name="theme-color" content="#ffffff">
  <!-- region disable cache -->
  <meta content="private,no-cache,no-store,must-revalidate" name="Cache-Control">
  <meta content="Thu Jan 01 1970 08:00:00 GMT" name="Expires">
  <meta content="no-cache" name="Pragma">
  <!-- endregion -->
  <link rel="icon" href="favicon.svg?v=2021-04-02T03:15:11.333Z" type="image/svg+xml">
  <link rel="apple-touch-icon" href="pwa-192x192.png?v=2021-04-02T03:15:11.339Z">
  <link rel="mask-icon" href="safari-pinned-tab.svg?v=2021-04-02T03:15:11.342Z" color="#00aba9">
  <script data-config="" src="js/config.js?v=2021-07-16T07:43:44.660Z"></script>
<script src="js/config.production.js?v=2021-06-26T08:47:25.770Z"></script><script type="module" crossorigin src="./assets/index.2ad23f44.js"></script>
  <link rel="modulepreload" href="./assets/vendor.e17f3b1e.js">
  <link rel="stylesheet" href="./assets/vendor.b0df0557.css">
  <link rel="stylesheet" href="./assets/index.1ae18a98.css">
<link rel="manifest" href="./manifest.webmanifest"><script src="./registerSW.js"></script></head>
<body>
<div id="app"></div>




<script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
  <script nomodule src="./assets/polyfills-legacy.5aaf34bd.js"></script>
  <script nomodule id="vite-legacy-entry" data-src="./assets/index-legacy.4cc821f8.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
</body></html>

index.html本身设置了Cache-Control,Expires,no-cache来避免客户端缓存,试图让客户端每次访问都从服务端取最新的版本
内部引用的静态资源则用打包工具加了?v=...形式的时间戳
代码生成的js和css包则自动加了hash后缀,如果打包时内容发生了变化,hash也会变化

在浏览器访问时,如果先打开浏览器,访问过老版本网页,然后关闭浏览器,打包更新,再重新打开浏览器,则仍然显示老版本网页(F12 network中显示html js css都是from disk cache),此时手动F5刷新,才变成新版本网页

在微信小程序webview访问时,如果曾经访问过老版本网页,然后关闭微信小程序,打包更新,再重新访问,则仍然显示老版本网页,手动反复退出重进多次才会刷新为新版本网页

回复
阅读 217
1 个回答

看看缓存是否真的生效了?截图看看index.html请求的响应头部?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏