Nuxt 2.15.7 dev模式无PWA模块仍报Cache put workbox错误求助

问题原因 #

你遇到的报错是Nuxt 2.15.x版本内置workbox逻辑在开发模式下的常见问题，无需安装@nuxt/pwa模块也会触发。本质是开发模式下热更新频繁，资源响应不符合workbox的缓存写入规则，才会抛出Failed to execute 'put' on 'Cache'错误。

解决步骤 #

• 修改nuxt.config.js配置，禁用开发模式下的workbox功能，添加如下配置即可：

export default {
  // 其他现有配置保持不变
  build: {
    // 其他build配置保持不变
    workbox: process.env.NODE_ENV === 'production' ? {} : false
  }
}

如果不需要完全禁用，仅关闭开发模式下的workbox调试，也可以使用以下配置：

export default {
  build: {
    workbox: {
      dev: false
    }
  }
}

• 清理浏览器端残留内容：打开浏览器控制台的Application面板，找到Service Workers选项，注销当前站点的service worker，再进入Cache Storage删除所有关联缓存。
• 重启本地dev服务，重新访问站点即可消除报错。

补充说明 #

该问题仅存在于开发模式，不会影响生产环境的打包运行，无需额外修改生产环境的相关配置。

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