Nuxt 3 发版后路由白屏：我把 ChunkLoadError 改成版本探测和温和刷新

问题出现在一次普通发版后：已经打开网站的用户，点击站内路由时页面白屏，控制台报 Failed to fetch dynamically imported module 或 ChunkLoadError。刷新当前页能恢复，但用户正在浏览或填写内容，体验很差。

为什么发版后会白屏

本质是浏览器里还留着旧的 HTML 和路由映射，懒加载 chunk 的文件名带 hash。新构建发布后，旧 chunk 可能已被替换或清理，旧页面再按需加载就会 404。直接 reload 虽然简单，但会把表单、滚动位置和未保存输入一起丢掉。

版本探测：不要盲目 reload

我会在构建时把 build id 写到 /version.json，也注入到 window.__BUILD__。平时不请求，只在路由加载失败时查一次，避免正常页面多一次网络请求。

const isChunkError = (err) =>
  /chunk|dynamically imported module/i.test(String(err?.message || ''));
async function handleChunkError(err) {
  if (!isChunkError(err)) return;
  const res = await fetch('/version.json?t=' + Date.now());
  const build = (await res.json()).build;
  if (build !== window.__BUILD__) {
    showUpdateTip(() => location.reload());
  }
}

温和刷新兜底

这里的关键是别把“发现新版本”做成强制打断。提示条要轻，刷新前保留路径和草稿，用户点确认后再跳转。

1. 路由钩子或错误边界捕获 chunk 加载失败，避免继续渲染崩溃。
2. 请求 /version.json 或构建头，比较当前 build 是否变化。
3. 版本变化时显示提示条，让用户选择立即刷新，而不是静默强刷。
4. 刷新前把当前路径和关键表单草稿写入 sessionStorage。
5. 版本接口失败时只提示手动刷新，防止无限 reload。

“ChunkLoadError 不是玄学，它通常是部署窗口期的资源版本问题。兜底要做的不是掩盖错误，而是让用户平滑地过渡到新版本。”

这套方案上线后，发版窗口期的白屏投诉基本没了。它不复杂，但很实用：把部署导致的资源失效变成一个可解释、可恢复的用户流程，而不是一个冷冰冰的错误页。