Vue 全栈元框架 Nuxt 升级 v3.14 版本

作者：Nuxt 团队

译者：林语冰

资源：Nuxt 官方博客[1]

00. 前言

Nuxt 是一个基于 Vue 的开源元框架，可以创建类型安全、高性能和生产就绪的全栈 Web 应用。

Nuxt 3.14 正式发布，新版拥有全新的 rspack 构建器、shared 文件夹和性能优化！

在幕后，Nuxt 团队为 Nuxt v4 主版本的升级做了很多准备工作（尤其是 unjs 方面为 Nitro v3 做准备！）

01. jiti 驱动的更快启动

加载 Nuxt 配置文件，模块和其他构建时代码现在由 jiti v2[2] 驱动。

重点之一是，尽可能随时随地集成 Node 原生的 ESM 模块导入，这意味着 Nuxt 可以更快地启动。

02. 前后端共享代码和类型的 shared 文件夹

Client/Server 是客户端-服务器模型，一种前后端的分布式应用结构。

请不要在你的 Nitro 后端代码中导入 Vue 应用的前端代码，反之亦然。但这意味着，在共享不依赖于 Nitro/Vue 上下文的类型或实用工具时，我们会遭遇一点阻力。

为此，我们新增了一个 shared/ 文件夹。请不要将 Vue 或 Nitro 的代码导入到 shared 文件夹的文件中，但它会生成自动导入，这允许你在应用的其他地方使用。

你也可以按需使用指向 shared 文件夹的 #shared 新别名。

shared 文件夹位于你的 server/ 文件夹旁边。（如果你使用的是 compatibilityVersion： 4，这意味着 shared 文件夹不是位于你的 app/ 文件夹中。）

03. rspack 构建器

我们很高兴为 rspack 推出一流的 Nuxt 新型构建器。它仍处于实验阶段，但我们已经重构了 Nuxt 内部的虚拟文件系统，以使用 unplugin 来实现这一点。

👉 要体验 rspack 构建器，你可以使用这个 启动器[3]；或者直接安装 @nuxt/rspack-builder，并在你的 Nuxt 配置文件中设置 builder： ''rspack''。

04. 新型组合式函数

我们新增了 useResponseHeader 和 useRuntimeHook 组合式函数。

05. 新型模块实用工具

我们现在有一个 addServerTemplate 新型实用工具，用于添加虚拟文件，用于在 Nitro 运行时路由中进行访问。

06. Nuxt 4 更新

我们合并了一些更新，这些更新能且仅能对 compatibilityVersion： 4 生效，但你可以提前选用。

1. 以前，如果你有一个诸如 ~/components/App/Header.vue 这样的组件，它会在你的 devtools 中显示为 <Header>。从 Nuxt 4 开始，我们确保它会显示为 <AppHeader>，但这是可选的，以免破坏你可能已实现的任何手动版 <KeepAlive>。
2. 在调用 pages：extend 之前，Nuxt 会扫描文件中的页面元数据。但这导致了某些迷惑行为，因为此时添加的页面最终不会遵循其页面元数据。因此，在调用 pages：extend 之前，现在我们不会扫描元数据。相反，我们有一个新型的 pages：resolved hook，它在 pages：extend 之后被调用，此时所有页面都增加了它们的元数据。我们推荐将 experimental.scanPageMeta 设置为 after-resolve 来选用此功能，因为它可以搞定许多 bug。

07. Nuxt v3.15 规划

下列功能没有赶上今天的 Nuxt v3.14，但你可以期待它们在下个次版本更新：

• 模块的自动导入指令
• isolated 页面渲染
• 延迟水合

粉丝互动 😍

👉 本期的话题是：如何评价 Nuxt 新增前后端共享的 shared 文件夹，你期望下次升级可以有哪些新功能？

欢迎你在本文下方留言互动，或者友情转发。👻

我是大家的林语冰 👨‍💻，欢迎持续关注我，随时了解前端社区的最新资讯。

谢谢大家的点赞和转发，我们下期再见，掰掰~ 👍

参考文献

[1] Nuxt 官方博客: nuxt.com/blog/v3-14

[2] jiti v2: github.com/unjs/jiti/r…

[3]启动器: github.com/danielroe/n…