用途:该技能是 Nuxt 4 生产化参考指南,集中讲解水合、性能、测试、部署与 v3 迁移的模式。适合在调试“Hydration node mismatch”、优化 Core Web Vitals、编写 Vitest 测试、部署到 Cloudflare/Vercel/Netlify 时按需加载对应参考文档(如 references/hydration.md、performance.md、testing-vitest.md、deployment-cloudflare.md)。
主要能力:
- 水合:解释不匹配成因(Math.random()、window 等在服务端不可用、new Date()、第三方脚本),给出 useState、onMounted、ClientOnly、条件渲染等修复模式。
- 性能:使用 defineAsyncComponent、defineLazyHydrationComponent(visible/interaction/idle)、routeRules 中的 prerender、swr、isr、ssr:false 与 Cache-Control 头,以及 NuxtImg/NuxtPicture 图片优化。
- 测试:安装 bun add -d @nuxt/test-utils vitest @vue/test-utils happy-dom,用 defineVitestConfig 设置 environment: 'nuxt',通过 mountSuspended 测试组件、mockNuxtImport 模拟 useFetch,通过 @nuxt/test-utils/e2e 的 setup({ server: true }) 与 $fetch 测试服务端路由。
- 部署:设置 nitro.preset 为 cloudflare-pages、cloudflare-module、vercel 或 netlify;Cloudflare 可通过 bunx wrangler pages deploy .output/public 部署,用 wrangler.toml 配置 D1/KV 绑定;NuxtHub 提供 database/kv/blob/cache。
- 迁移:将 nuxt 升级至 ^4.0.0,启用 future.compatibilityVersion: 4,把源文件移入 app/,处理浅层响应式(必要时 deep: true)与默认值由 null 变为 undefined。
适用场景:Nuxt 4 项目的上线性优化与排错、CI 中的组件与接口测试、面向 Cloudflare/Vercel/Netlify 的部署配置、Nuxt 3 到 4 的升级。
限制:资料未提供该技能的安装方式、收费或授权价格、平台兼容性细节、性能提升的具体数值承诺或实测效果;部分示例依赖第三方服务与配置,需自行核实。版本信息为 4.0.0,最后更新 2025-12-28,License 为 MIT。