Nuxt 3生产环境error.vue页面空白，报nuxtApp.hook非函数错误

问题复现 #

• 本地执行yarn dev时，输入无效URL或触发404/500错误，error.vue页面能正常显示
• 生产环境执行node .output/server/index.mjs运行时，错误页仅显示空白，日志报错：

frontend  | vue:error TypeError: nuxtApp.hook is not a function
frontend  |     at file:///app/.output/server/chunks/build/server.mjs:6874:11
frontend  |     at renderComponentRoot (/app/.output/server/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5010:13)
frontend-antramy  |     at renderComponentSubTree (/app/.output/server/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:401:16)
frontend  |     at renderComponentVNode (/app/.output/server/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:394:12)
frontend  |     at ssrRenderComponent (/app/.output/server/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:86:10)
frontend  |     at default (file:///app/.output/server/chunks/build/server.mjs:6912:19)
frontend  |     at ssrRenderSuspense (/app/.output/server/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:224:5)
frontend  |     at file:///app/.output/server/chunks/build/server.mjs:6907:7
frontend  |     at renderComponentSubTree (/app/.output/server/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:444:9)
frontend  |     at renderComponentVNode (/app/.output/server/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:394:12) null https://vuejs.org/error-reference/#runtime-1

可能的解决方案 #

1. 修正error.vue中的nuxtApp调用逻辑 #

Nuxt 3的SSR渲染阶段，useNuxtApp()返回的实例不支持直接调用hook方法。如果你的error.vue中有类似代码：

<script setup>
const nuxtApp = useNuxtApp()
nuxtApp.hook('someHook', () => { ... })
</script>

改为仅在客户端执行：

<script setup>
const nuxtApp = useNuxtApp()
if (process.client) {
  nuxtApp.hook('someHook', () => { ... })
}
</script>

2. 验证生产构建完整性 #

• 确保执行yarn build后，.output/server目录包含完整的构建产物和依赖，Docker镜像构建时不要遗漏该目录
• 检查Dockerfile是否正确设置工作目录，并完整复制.output文件夹内容

3. 升级Nuxt及相关依赖 #

该报错可能是Nuxt 3的已知版本问题，尝试升级到最新稳定版：

yarn upgrade nuxt@latest

同时确认@vue/server-renderer等依赖版本与Nuxt版本兼容

4. 检查Traefik路由配置 #

确保Traefik未修改请求响应头或截断SSR渲染内容，比如正确传递Host请求头，避免Nuxt渲染时丢失上下文

5. 调整Suspense组件使用 #

如果error.vue中使用了Suspense组件，尝试移除或调整使用方式——SSR渲染Suspense时可能触发上下文异常

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