Nuxt 3应用中chunk-content-script报错问题求助

环境信息 #

• Operating System: Windows_NT
• Node Version: v18.18.2
• Nuxt Version: 3.9.1
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: yarn@1.22.21
• Builder: -
• User Config: ssr, css, app, modules, i18n, sitemap, image, device, site, nitro, build, security, devServerHandlers, runtimeConfig, vite
• Runtime Modules: @nuxtjs/tailwindcss@6.11.4, @nuxtjs/i18n@8.0.0, @vueuse/nuxt@10.7.2, @nuxtjs/device@3.1.1, @pinia/nuxt@0.4.11, nuxt-simple-robots@4.0.0-rc.13, nuxt-simple-sitemap@4.4.1, nuxt-security@0.14.4, @nuxt/image@1.3.0
• Build Modules: -

问题描述 #

不清楚该错误何时出现，想修复但处理不了这类错误。请问chunk-content-scripts是什么？该如何解决这类错误？

我尝试了以下几种错误处理方式，但均未触发：

1. 使用onErrorCaptured钩子：

onErrorCaptured((error) => {
  console.error(error)
})

2. 在plugins目录下创建error-handler.ts：

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.config.errorHandler = (error, instance, info) => {
    console.log('~: ', error, instance, info)
  }

  // Also possible
  nuxtApp.hook('vue:error', (error, instance, info) => {
    console.log('~2: ', error, instance, info)
  })
})

我甚至注释掉了app.vue中的所有内容，但控制台仍会出现该错误。
错误截图：

解答 #

什么是chunk-content-scripts？ #

chunk-content-scripts是Nuxt/Vite构建过程中生成的内容脚本块，是应用代码拆分后生成的按需加载片段。这类错误通常是构建产物加载失败、缓存冲突、依赖缺失或安全策略限制导致的。

解决步骤 #

1. 清理缓存与依赖

   • 执行命令清理Yarn缓存：yarn cache clean
   • 删除项目目录下的.nuxt、.output、node_modules文件夹
   • 重新安装依赖并启动项目：yarn install && yarn dev

2. 检查Nuxt Security模块配置

   • 你使用了nuxt-security，它的内容安全策略（CSP）可能阻止了chunk脚本加载。可以临时禁用CSP测试：

     // nuxt.config.ts
     export default defineNuxtConfig({
       security: {
         csp: false
       }
     })
     

   • 如果禁用后错误消失，再逐步调整CSP规则，允许加载本地chunk脚本。

3. 调整Vite构建拆分策略

   • 尝试禁用自动chunk拆分，排查是否是拆分逻辑导致的问题：

     // nuxt.config.ts
     export default defineNuxtConfig({
       build: {
         rollupOptions: {
           output: {
             manualChunks: undefined
           }
         }
       }
     })
     

4. 捕获全局脚本错误

   • 你之前的错误处理只覆盖了Vue层面的错误，这类chunk加载错误属于浏览器全局脚本错误，需要添加全局监听：

     <!-- app.vue -->
     <script setup>
     onMounted(() => {
       window.addEventListener('error', (event) => {
         console.error('全局脚本错误:', event.error)
       })
     })
     </script>
     

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