发布·  

Nuxt 4.0 发布公告

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

Daniel Roe

@danielroe.dev

Nuxt 4.0 来了！ 🎉

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

如果您一直在关注，您会认识到其中的许多特性和变更——如果您是第一次接触它们，我们希望您会喜欢它们。

🔥 有哪些新功能？

Nuxt 4 的核心在于让您的开发体验更流畅

  • 通过新的 app/ 目录结构，实现更清晰的项目组织
  • 更智能的数据获取 - 我们借此机会解决了数据层的一些不一致性并改进了性能
  • 通过项目内部不同上下文（应用代码、服务器代码、shared/ 文件夹和配置）之间的分离，实现更好的 TypeScript 支持
  • 通过采用内部套接字和更快的 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

这将对您的锁定文件进行去重，并帮助确保您从 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 上