Vite 中因 `main.js` 脚本加载失败导致白屏如何解决？

2024-03-07 23:39:50

解决 Vite 中因 main.js 脚本加载失败导致的白屏问题

问题概述

在使用 Vite 或 Rollup 等现代 Web 打包器时，可能会遇到一个令人沮丧的问题：如果 main.js 脚本加载失败，网站将无法加载并停留在空白的 index.html 文档中。直到手动刷新页面，网站才能重新加载并恢复正常。

问题分析

这个白屏问题的根源在于 Vite 在构建过程中为每个 js 块、资源和 main.js 文件添加了一个哈希值。这是为了让客户端知道文件已更改，需要下载新文件。在 Vue 应用的路由器中，有一个处理程序会在加载动态模块时检查哈希值，如果发现哈希值已更改，就会刷新页面。

但是，如果 main.js 文件的哈希值发生更改，网站将无法加载 Vue 路由器，因此也就无法通过这个错误处理程序来刷新页面。导致网站陷入白屏状态，直到手动刷新才能恢复正常。

解决方案

要解决这个问题，一种有效的解决方案是在 HTML 文件中为 main.js 脚本添加一个错误处理程序。具体来说，可以为 <script> 标签添加一个 onerror 属性，并在 onMainScriptLoadingError 函数中根据 localStorage 中存储的值重载页面。这样，既可以重新加载页面并下载新的 index.html（带有新的 main.js 哈希值），又能避免无限刷新循环。

代码示例：

<script src="main.js" onerror="onMainScriptLoadingError()"></script>

function onMainScriptLoadingError() {
  const storedHash = localStorage.getItem("mainScriptHash");
  const newHash = calculateNewHash();

  // 如果新的哈希值与存储的哈希值不同，则重新加载页面
  if (newHash !== storedHash) {
    localStorage.setItem("mainScriptHash", newHash);
    window.location.reload();
  }
}