发布·  

Nuxt 4.0 发布

Nuxt 4.0 来了！这是一次以开发者体验为核心的深思熟虑的演进，带来了更好的项目组织、更智能的数据获取和改进的类型安全。
Daniel Roe

Daniel Roe

@danielroe.dev

Nuxt 4.0 来了！ 🎉

经过一年的实际测试，我们很高兴地宣布 Nuxt 4 正式发布。这是一个以稳定性为重点的主要版本，引入了一些经过深思熟虑的破坏性变更，以改进开发体验。

如果您一直在关注，您会认出这些功能和变更中的许多——如果您是第一次接触它们，我们希望您会喜欢它们。

🔥 有什么新功能？

Nuxt 4 旨在让您的开发体验更流畅

  • 通过新的 app/ 目录结构，实现更清晰的项目组织
  • 更智能的数据获取——我们借此机会解决了一些不一致问题，并改进了数据层的性能
  • 更好的 TypeScript 支持，项目内不同上下文（应用程序代码、服务器代码、shared/ 文件夹和配置）之间实现基于项目的分离
  • 通过采用内部套接字和更快的 CLI，实现更快的 CLI 和开发速度

为什么是这些特定的功能？主要是因为这些改进需要进行技术上具有破坏性的更改。

一般来说，我们发布版本时会采取一种避免炒作的方式。我们不会为了一个大版本而保留功能，而是在 Nuxt 3 的次要版本中不断推出改进。

我们还花费了大量时间研究如何以向后兼容的方式实现这些更改，我希望这意味着大多数 Nuxt 3 项目可以以最小的努力进行升级。

我建议您在开始之前仔细阅读升级指南，以了解应用程序的哪些区域可能会受到影响。

🗂️ 新的项目结构

最显著的变化是项目的组织方式。您的应用程序代码现在默认位于 app/ 目录中

my-nuxt-app/
├─ app/
│  ├─ assets/
│  ├─ components/
│  ├─ composables/
│  ├─ layouts/
│  ├─ middleware/
│  ├─ pages/
│  ├─ plugins/
│  ├─ utils/
│  ├─ app.vue
│  ├─ app.config.ts
│  └─ error.vue
├─ content/
├─ public/
├─ shared/
├─ server/
└─ nuxt.config.ts

这有助于将您的代码与 node_modules/ 和 .git/ 分离，从而加快文件监视器速度（尤其是在 Windows 和 Linux 上）。它还为您的 IDE 提供了更好的上下文，判断您正在处理客户端代码还是服务器代码。

不想迁移？ 完全没问题！Nuxt 将检测您现有的结构并像以前一样继续工作。

🎨 更新的 UI 模板

Nuxt 的启动模板焕然一新，改进了可访问性、默认标题和模板优化 (#27843).

🔄 更智能的数据获取

我们改进了 useAsyncData 和 useFetch 的工作方式。多个使用相同键的组件现在会自动共享它们的数据。组件卸载时还会自动清理，您可以使用响应式键在需要时重新获取数据。此外，我们为您提供了更多控制缓存数据使用时机的能力。

其中一些功能已经在 Nuxt v3 的次要版本中提供，因为我们一直在逐步推出。Nuxt v4 带来了不同的默认设置，我们预计将在未来继续致力于这个数据层。

🔧 更好的 TypeScript 体验

Nuxt 现在为您的应用程序代码、服务器代码、shared/ 文件夹和构建器代码创建单独的 TypeScript 项目。这意味着在不同上下文中使用时，将获得更好的自动补全、更准确的类型推断和更少的令人困惑的错误。

使用 Nuxt 4，您只需要在项目根目录中有一个 tsconfig.json 文件！

这可能是升级时最容易引起意外的单个问题，但从长远来看，它也应该使您的 TypeScript 体验更加流畅。请报告您遇到的任何问题。 🙏

⚡ 更快的 CLI 和开发

在发布 v4 的同时，我们一直在努力加快 @nuxt/cli 的速度。

  • 更快的冷启动——开发服务器启动速度明显加快
  • Node.js 编译缓存——自动重用 v8 编译缓存
  • 原生文件监视——使用 fs.watch API，减少系统资源消耗
  • 基于套接字的通信——CLI 和 Vite 开发服务器现在通过内部套接字而不是网络端口进行通信，减少了开销——尤其是在 Windows 上

这些改进结合起来可以对您的日常开发体验产生非常显著的影响，我们还有更多的计划。

🚀 如何升级

尽管任何主要版本都会带来破坏性变更，但我们发布此版本的主要目标之一是确保升级路径尽可能顺利。大多数破坏性变更都可以通过兼容性标志进行测试，时间长达一年多。

大多数项目应该会顺利升级，但有一些事情需要注意

  • Nuxt 2 兼容性已从 @nuxt/kit 中移除。（这将特别影响模块作者。）
  • 一些遗留工具和已弃用功能已清除。
  • 新的 TypeScript 设置可能会暴露出以前隐藏的一些类型问题。
  • 一些模块可能需要进一步更新才能完全兼容 Nuxt 4。

不过别担心——对于大多数破坏性变更，都有配置选项可以在您调整时恢复旧行为。

1. 更新 Nuxt

我们建议升级时运行

npx nuxt upgrade --dedupe

这也会对您的 lockfile 进行去重，并有助于确保您从 Nuxt 依赖的其他依赖项（尤其是在 unjs 生态系统中）中获取更新。

2. 可选：使用迁移工具

我们还与Codemod合作，自动化了许多（但并非全部）迁移步骤

npx codemod@latest nuxt/4/migration-recipe

3. 测试和调整

运行您的测试，检查一切是否正确构建，并修复出现的任何问题。升级指南中提供了特定场景的详细迁移步骤。

我们建议您在开始升级之前完整阅读它，以了解应用程序的哪些区域可能会受到影响。

🗺️ 接下来是什么？

我们正在计划快速发布补丁以解决出现的问题。Nuxt 3 将继续获得维护更新（包括错误修复和 Nuxt 4 功能的回溯）直到 2026 年 1 月底，因此如果您需要时间迁移，无需着急。

展望未来，我们计划尽快发布 Nuxt 5，它将带来 Nitro v3 和 h3 v2 以实现更好的性能，并采用 Vite 环境 API 以获得改进（和更快！）的开发体验。还有更多的工作正在进行中！

而且，除了主要版本之外，我们还计划了许多激动人心的功能，将进入 Nuxt 3.x 和 4.x 发布分支，包括对 SSR 流媒体的支持 (#4753)、第一方可访问性模块 (#23255)、内置的获取缓存策略 (#26017)、更强的类型化获取调用（将在 Nitro v3 中推出）、动态路由发现 (#32196)、多应用支持 (#21635) 等等。

❤️ 感谢

此版本归功于许多人，特别是过去一年中一直在测试 v4 兼容模式的人们。我非常感谢——感谢你们所有的帮助！

使用 Nuxt 4 愉快编码！🚀

📑 完整发布说明

阅读 Nuxt v4.0.0 的完整发布说明。

衷心感谢所有参与本次发布的人。❤️

← 返回博客
Nuxt 在领英上Nuxt on BlueskyNuxt 在 X 上