解决vite项目发版后浏览器缓存问题

问题：更新环境的版本后，再次点开时是旧的前端

下图中，当时最新的发布版本还是 26 号，却显示 22号的

打开某页面时，页面渲染失败，如下所示

原因：

vite 默认配置后，打包后 css 和 js 的名字后面都加了哈希值，不会有缓存问题。
但是 index.html 是有缓存的，其中加载的 css\js 文件已经不对了。 于是，出现报错 TypeError: Failed to fetch dynamically imported module。

解决方案：

① 处理 TypeError: Failed to fetch dynamically imported module

相关 issue:

• # Github —— TypeError: Failed to fetch dynamically imported module #11804
• # TypeError: Failed to fetch dynamically imported module" on Vue/Vite vanilla setup

在 ErrorBoundary 中，捕获到错误这种错误后，自动刷新页面 （不过会看见闪屏，体验感不太好）

 const fetchResourcesErrors = ['Failed to fetch dynamically imported module', 'Importing a module script failed']
   if (fetchResourcesErrors.some((item) => isString(error?.message) && error.message?.includes(item))) {
     window.location.reload()
   }

② 不缓存 index.html

a.前端在 .html 页面加 meta 标签

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="expires" content="0">

b.后端 nginx 配置，让 index.html 不缓存

add_header Cache-Control "no-cache, no-store";

相关文章:

• # 完美解决 - 前端发版后浏览器缓存问题（发版后及时拉取最新版本代码）
• # web项目每次发版必须清除缓存才会更新
• # Meta http-equiv属性与HTTP头的Expires中（Cache-control）详解