Vite/Rollup+Vue项目main.js加载失败致空白页的解决方案问询

一、方案完全可行 #

你的思路逻辑通顺，完全可以解决main.js哈希更新后客户端无法自动加载新资源的问题：

• 核心逻辑成立：当旧哈希的main.hash1.js因被删除加载失败时，onerror触发后通过localStorage控制刷新行为——既能拉取包含新哈希main.hash2.js的最新index.html，又能通过记录刷新时间戳/次数避免无限循环。
• 实现时注意这两个细节：
  • 错误处理函数必须放在加载main.js的脚本之前，确保能被正常调用，比如：

    <script>
      function onMainScriptLoadingError() {
        const lastReloadTime = localStorage.getItem('lastForceReloadTime');
        const now = Date.now();
        // 设置5分钟内仅刷新一次，避免循环
        if (!lastReloadTime || now - parseInt(lastReloadTime) > 300000) {
          localStorage.setItem('lastForceReloadTime', now.toString());
          window.location.reload(true); // 强制绕过缓存刷新页面
        }
      }
    </script>
    <script type="module" src="/src/main.hash1.js" onerror="onMainScriptLoadingError()"></script>
    

  • 用window.location.reload(true)强制浏览器跳过缓存拉取最新index.html，避免仍拿到旧缓存页面。

二、官方文档未提及的原因 #

1. 场景优先级问题：打包工具的核心职责是构建产物，缓存失效后的客户端兜底处理属于部署/运维边缘场景，官方文档更聚焦工具本身的核心功能（比如打包配置、性能优化），这类需要结合服务器部署、客户端缓存策略的自定义方案，不会作为标准流程写入文档。
2. 解决方案多样性：缓存失效问题有多种常规解法（比如CDN缓存策略、服务器给index.html设置no-cache、版本化部署保留旧文件），你的方案属于轻量级客户端兜底方案，并非通用标准解法，因此官方不会强制推荐。
3. 避免学习成本增加：如果把这类客户端逻辑加入官方文档，可能让新手混淆构建逻辑和部署后的缓存处理，官方更倾向于引导用户通过标准缓存控制策略（比如给index.html设置Cache-Control: no-cache）从根源解决问题。

补充建议 #

• 配合服务器给index.html设置Cache-Control: no-cache，让浏览器每次请求index.html时都和服务器确认是否更新，从根源减少旧哈希main.js的加载场景。
• 刷新逻辑里可以额外读取新页面的main.js哈希，和localStorage旧值对比，进一步避免不必要的刷新。

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