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

下图中，当时最新的发布版本还是 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()

  }

1

2

3

4

② 不缓存 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">

1

2

3

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


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