Nuxt 4 正式发布啦

好消息，经过一年多的实战测试，Nuxt 4.0 正式发布了！这是一个专注于稳定性和开发者体验的重大版本更新，在提升性能、代码结构、类型系统等方面做出了诸多优化。如果你正在使用 Nuxt 3，升级将会非常平滑！

核心亮点

1. 更清晰的项目结构：新增 app/ 目录

Nuxt 4 推出了一种新的默认项目结构，把你的应用代码集中到 app/ 目录中，使得客户端代码、服务器端代码和配置之间更加清晰分离：

my-nuxt-app/
├─ app/             # 应用核心代码
│  ├─ components/
│  ├─ pages/
│  ├─ layouts/
│  └─ app.vue
├─ public/
├─ shared/         # 通用工具库
├─ server/
└─ nuxt.config.ts

✅ 如果你不想迁移，Nuxt 也会自动识别旧结构，保持兼容！

2. useAsyncData 和 useFetch 升级

Nuxt 4 对数据获取进行了大幅优化,可以更智能获取数据：

• 相同 key 的组件共享数据，避免重复请求
• 组件卸载时自动清理缓存
• 支持响应式 key 重新触发请求
• 更可控的缓存策略

示例代码：

const { data, pending, refresh } = await useFetch('/api/posts', {
  key: 'posts',
  server: true,
  lazy: true
})

你可以通过 refresh() 手动触发数据更新，或用 watch() 响应变化。

3. 更优秀的 TypeScript 体验

Nuxt 4 使用 多项目结构（project references），将 app、server、shared、builder 等上下文分离，提高类型推断准确性。

只需一个 tsconfig.json 即可：

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "types": ["@nuxt/types"]
  }
}

你将获得更少的类型错误和更强的自动补全支持！

4. 更快的 CLI 与开发体验

Nuxt CLI 在性能上也做了不少优化：

• 冷启动更快
• 使用 V8 编译缓存
• 原生文件监听（更省资源）
• CLI 与 Vite 通过 socket 通信（减少网络开销）

尤其是在 Windows 和大型项目中，这些改进会非常明显！

如何升级到 Nuxt 4？

Nuxt 4 的升级非常平滑，推荐按以下步骤进行：

第一步：一键升级

使用官方命令自动升级并去重依赖：

npx nuxt upgrade --dedupe

第二步：使用 Codemod 自动迁移（可选）

npx codemod@latest nuxt/4/migration-recipe

该工具可以自动处理部分兼容性变更，特别适合项目较大的同学使用。

第三步：测试与调整

运行你的测试、查看构建结果，根据 升级指南检查是否有需要手动修复的地方。比如：

• 清理弃用的 API
• 检查 ts 类型是否有报错
• 更新不兼容的模块（极少数）
• 未来路线图：Nuxt 5 与更多功能

虽然 Nuxt 4 才刚刚发布，但 Nuxt 团队已经计划 Nuxt 5 将引入：

• Nitro v3 + h3 v2 性能再还能更秀
• Vite 环境 API 支持
• 更强的 SSR 流式渲染
• 内置缓存策略、动态路由发现
• 多应用支持（multi-app）

结语

Nuxt 4 是一次以稳定和开发体验为核心的进化，它没有一味追求“炫酷”的新特性，而是逐步打磨每一处细节，让开发者写得更安心、改得更省心、跑得更顺心。

如果你已经在使用 Nuxt 3，升级会非常顺滑。如果你还在 Nuxt 2，也许这正是切换的好时机。

以上关于Nuxt 4 正式发布啦的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。