Angular应用长期后台后空白，需刷新恢复问题求助

核心原因 #

这个问题本质是浏览器缓存的JS模块资源过期后，Vercel返回了HTML页面而非正确的JS模块。Angular打包后的资源带哈希值，但长期驻留的标签页可能在资源过期后，请求旧的哈希资源时，Vercel的 fallback 配置返回了index.html，导致浏览器把HTML当成JS模块解析，触发MIME类型错误，最终<app-root>无法渲染。

具体解决步骤 #

1. 优化Vercel的重写规则（关键） #

在项目根目录创建或修改vercel.json，确保只有当请求的资源不存在时才返回index.html，同时对静态资源设置正确的缓存策略：

{
  "rewrites": [
    {
      "source": "/(.*\\.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot))$",
      "destination": "/$1"
    },
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ],
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/(.*\\.js)$",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

• 重写规则优先匹配静态资源，避免把JS请求导向index.html
• 对带哈希的静态资源设置immutable缓存，确保浏览器不会重复请求过期资源

2. 配置Angular的Service Worker（可选，增强稳定性） #

如果项目适合使用Service Worker，可以通过Angular CLI添加：

ng add @angular/pwa

这会自动配置资源缓存策略，当资源更新时，Service Worker会主动拉取新资源，避免旧资源过期导致的请求错误。

3. 添加页面加载失败兜底逻辑 #

在index.html中添加简单的兜底提示，同时监听JS加载失败事件，自动刷新页面：

<body>
  <app-root></app-root>
  <script>
    window.addEventListener('error', (e) => {
      if (e.message.includes('Failed to load module script') && e.message.includes('text/html')) {
        // 仅在出现特定MIME错误时自动刷新
        setTimeout(() => window.location.reload(), 1000);
      }
    });
  </script>
</body>

这个逻辑可以在出现问题时自动恢复，减少用户手动刷新的操作。

验证方法 #

部署修改后的代码后，打开页面并保留标签页数天，返回时观察是否还会出现空白页；或者手动清除浏览器缓存后，模拟旧资源请求（比如修改URL中的JS哈希值），确认不会返回HTML页面。

内容的提问来源于stack exchange，提问作者Mattew Eon