使用Nuxt 3.6.5与Storyblok，如何处理组件哈希变更问题？

问题原因 #

每次部署后Nuxt会重新生成组件/资源的哈希文件名，浏览器缓存的旧入口文件（如entry.de17131f.js）仍会请求旧哈希的chunk文件（如PostTemplate.e46bac68.js），但新部署的站点已不存在这些旧文件，进而触发404错误导致页面空白。

解决方案 #

1. 配置差异化缓存控制（Netlify） #

在项目根目录创建_headers文件，设置针对性的缓存策略：

/*
  Cache-Control: public, max-age=0, must-revalidate

/_nuxt/entry.*.js
  Cache-Control: public, max-age=600, must-revalidate

/_nuxt/*
  Cache-Control: public, max-age=31536000, immutable

• 根路径(/*)：强制浏览器每次验证资源是否更新
• 入口文件(entry.*.js)：设置10分钟短缓存，避免长期留存旧入口
• 其他Nuxt资源：设置1年长缓存，依靠哈希文件名变化自动触发新资源请求

2. 添加动态导入失败自动处理 #

在app.vue中加入错误捕获逻辑，检测到chunk加载失败时自动刷新页面：

<script setup>
import { onErrorCaptured } from 'vue';

onErrorCaptured((err) => {
  if (err.message.includes('Failed to fetch dynamically imported module')) {
    window.location.reload(true);
    return true;
  }
});
</script>

无需用户手动操作，自动修复空白页面问题。

3. 优化Nuxt构建配置 #

在nuxt.config.ts中确认并配置以下选项：

export default defineNuxtConfig({
  build: {
    filenameHashing: true, // 确保资源文件名带哈希（默认开启）
    manifest: true, // 生成资源清单，辅助浏览器追踪资源变化
  },
  nitro: {
    static: {
      cacheHeaders: {
        maxAge: 31536000,
        immutable: true,
      },
    },
  },
});

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