Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题

问题描述

老板访问前端项目时，如果电脑长时间没刷新，可能会遇到一个常见问题：研发刚部署了新版本，但老板电脑浏览器里的 index.html 还是旧的。于是 index.html 引用的 JS 文件也是旧的 hash 文件，已经不存在了。这时候，如果点击按需加载的模块或路由页面，就会报错：

[TypeError: Failed to fetch dynamically imported module]

相信很多前端都见过。

解决方案

可以用这个 Vite 插件： plugin-web-update-notification

插件功能：部署新版本后，会在页面弹出一个小提示，通知用户点击刷新即可更新页面。

不过，如果用户没注意通知就去点侧边栏其他模块，仍然可能触发 dynamically imported 的报错。以前我都是监听报错再强制刷新页面，现在有更简单的方法，只需要几行代码:

window.addEventListener('vite:preloadError', (event) => {
  window.location.reload() // 例如，刷新页面
})

官方文档: 构建生产版本 | Vite 官方中文文档