Release·  

Nuxt 3.3

3.3.0 是一个次要(功能)版本,具有许多性能和 DX 改进、错误修复和新功能供您使用。

✨ 本地模块开发 DX

我们已经进行了一系列的更改,以支持本地模块并改善 DX。

我们现在会自动扫描您的~/modules 文件夹,并将其中的顶级文件注册为项目中的模块(#19394)。

当这些文件发生更改时,我们将自动重新启动 nuxt 服务器。

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss',
-   '~/modules/purge-comments'
  ]
})

我们现在还公开了 nuxt/kit,以便您在本地项目中轻松访问 kit 组合函数,而无需安装 @nuxt/kit#19422)。

阅读关于本地模块的文档

♻️ 重新启动 Nuxt

您可以将文件添加到 watch 数组中,以自动重新启动服务器(#19530)。这对于模块作者特别有用。您还可以使用新的 restart 钩子触发 Nuxt 服务器的重新启动(#19084)。

🔥 性能改进

我们将静态资源的 maxAge 增加到 1 年,以符合最佳实践(#19335)并支持更多构建中的 Tree-shaking(#19508)。

nuxt-performance-improvements

我们还开始支持使用对象语法预加载 <NuxtLink> 中的路由(#19120):

<NuxtLink :to="{ name: 'home', query: { year: '2023' } }">Home</NuxtLink>

我们还会跟踪您使用的每个模块执行其设置所需的时间,并在设置时间过长时发出警告。您可以通过在 dev 服务器上运行 DEBUG=1 来查看所有这些值(#18648)。

DEBUG=1 npx nuxt dev
 Module pages took 1.5ms to setup.
 Module meta took 3.15ms to setup
 Module components took 4.5ms to setup.
...

您还可以通过配置组合函数以在特定环境中启用一些 Nuxt 的内部优化(#19383),或者自动注入魔术键(#19490)。

🐛 错误处理

现在,默认情况下我们会处理块错误(#19086),这意味着如果您的站点在重新部署时进行更新,我们将自动处理导航时的刷新

要禁用此行为,请将 experimental.emitRouteChunkError 选项设置为 "manual" 并使用新的 reloadNuxtApp 组合函数自行处理。了解更多信息,请参阅我们在 chunk-reload.client.ts 插件 中的实现方式。

您还可以设置 experimental.restoreState 以在刷新时保留应用程序的一些状态:

nuxt.config.ts
defineNuxtConfig({
  experimental: {
    restoreState: true
  }
})

我们还有一个新的试验性错误处理组件:<NuxtClientFallback>#8216),它可以捕获服务器上的渲染错误,替换为后备内容,并在客户端上精确地触发错误部分的重新渲染。这可以使用 experimental.clientFallback 来启用 - 欢迎提供反馈!

⚡️ Head 改进

我们已经迁移到直接使用 unhead#19519) - 并且自动从客户端构建中删除类似 useServerHead 这样的仅服务器端特定的 head 组合函数(#19576),这意味着您可以拥有出色的 SEO,而无需在客户端构建中包含仅对爬虫相关的 meta 标签逻辑。

还有一个新的 useHeadSafe 组合函数,用于处理不受信任的用户输入(#19548)。

🪵 浏览器 DevTools 中的更好日志记录

与 Chrome DevTools 团队合作,我们在 unjs + Nuxt 生态系统中实现了一些功能,现在我们有了对您的日志中的 Nuxt 内部堆栈跟踪的一流支持(仅限基于 Chromium 的浏览器,暂时)#19243。我们还改进了与 Nuxt 钩子有关的堆栈跟踪问题(unjs/hookable#69unjs/hookable#68),实现了 console.createTask

之前之后
before-nuxt-console-improvementsafter-nuxt-console-improvements

💪 类型改进

现在服务器 API 路由的类型更加准确 - 返回类型中已剥离非可序列化类型(unjs/nitro#1002)。

我们还增加了对 NuxtApp 的更多类型定义,并正确为未知注入类型进行类型定义,以提供更高的类型安全性(#19643)。

如果在使用 Nuxt 数据获取组合函数时遇到使用 transform + default 时的正确类型问题,现在我们会正确推断类型(#19487),无需再担心了。

⚗️ Nitro 增强

此版本附带 Nitro v2.3,带来了许多改进。请查看 发行说明 以获取更多信息。

我们现在支持在 nitro 服务器路由中使用 useAppConfig#19489) - 这是一个期待已久的变更。现在 useAppConfig在整个应用程序中都可以用于非运行时配置,例如来自层、模块等。

我们还添加了一个 nitro:build:public-assets 钩子,允许修改从 nitro 的预渲染/构建阶段输出的资产(#19638)。

🛠️ 构建变更

作为朝向 对 PNP 和 pnpm 支持的一流支持 的一部分,我们放弃了对一些内部(已弃用)使用 CJS 解析模式的工具的支持(#19537#19608)。

我们现在还使用 ESM 搜索路径解析依赖项,例如 nuxt@nuxt/kit 和更多其他模块。我们将密切关注此问题。

我们还正在为支持新的 TypeScript Node16 模块解析做准备(#19606),因此我们已更改了运行时输出的格式(使用 .js 替代 .mjs 扩展名,为子路径导出提供 types 字段等)。

🗺️ 自定义配置模式(高级)

我们一直在测试一个实验性功能,允许模块和用户扩展 Nuxt 配置模式(#15592),我们现在已经默认启用了这个功能(#19172)。我们希望这对于模块、层和主题作者特别有用,并为他们的用户提供更好的 DX。

更新日志

通过比较更改查看完整的更新日志,或在 GitHub 上查看发布

我们要感谢所有 28 位贡献者对本次发布的帮助 💚