Nuxt 4.2

我们很高兴宣布 Nuxt 4.2 发布，它带来了新功能，以改善 TypeScript DX，增强错误处理，并改进对数据获取的控制！🎉

🎯 数据获取中止控制

您现在可以直接在 useAsyncData 中使用 AbortController 信号，从而对请求取消进行精细控制（#32531).

其工作原理是，将内部信号传递给您的 useAsyncData handler，以取消任何可取消的 promise，例如 $fetch。

<script setup lang="ts">
const { data, error, clear, refresh } = await useAsyncData('users', (_nuxtApp, { signal }) => $fetch('/api/users', {
  signal
}))

refresh() // will actually cancel the $fetch request (if dedupe: cancel)
refresh() // will actually cancel the $fetch request (if dedupe: cancel)
refresh()
  
clear() // will cancel the latest pending handler
</script>

您还可以将 AbortController 信号直接传递给 refresh/execute，从而对请求取消进行精细控制。这在您需要根据用户操作或组件生命周期事件中止请求时特别有用。

const { data, refresh } = await useAsyncData('posts', fetchPosts)

// Abort an ongoing refresh
const abortController = new AbortController()
refresh({ signal: abortController.signal })

// Later...
abortController.abort()

🎨 更好的开发中错误页面

在开发过程中发生错误时，Nuxt 现在会同时显示您的自定义错误页面和详细的技术错误叠加层（#33359）。这让您两全其美——您可以看到用户将体验到的内容，同时也可以立即访问堆栈跟踪和调试信息。

技术叠加层显示为一个可切换面板，不会干扰您的自定义错误页面，从而在保持错误处理的实际预览的同时，更轻松地调试问题。

🔮 选择启用 Vite 环境 API

对于那些想要尝试尖端功能的人，您现在可以选择启用Vite 环境 API (#33492).

Vite 环境 API 是 Vite 6 中的一个重要架构改进。它允许 Vite 开发服务器同时处理多个环境（而不是像我们之前在 Nuxt 中那样需要多个 Vite 开发服务器），从而缩小了开发和生产之间的差距。

这应该可以提高开发性能并消除一些边缘情况错误。

……并且它是将 Nitro 作为 Vite 环境实现的基础，这应该会进一步加快开发服务器的速度，并允许开发与您的 Nitro 预设更高度地对齐。

export default defineNuxtConfig({
  experimental: {
    viteEnvironmentApi: true
  }
})

这也是 Nuxt v5 的第一个重大更改。您可以通过将 compatibilityVersion 设置为 5 来选择启用这些重大更改

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 5
  },
})

请仅将其用于测试，因为它会启用无限的未来重大更改，包括在我们发布 Nuxt 集成后更新到 Nitro v3。

📦 新的 @nuxt/nitro-server 包

我们已将 Nitro 服务器集成提取到其自己的包中：@nuxt/nitro-server (#33462）。这种架构更改允许不同的 Nitro 集成模式，并为服务器端渲染的未来创新铺平了道路。

虽然此更改主要是内部的，但它也是我们持续努力使 Nuxt 更具模块化和灵活性的部分。新包提供独立的 Nitro 集成，并为替代集成方法奠定了基础（例如在 Nuxt v5+ 中将 Nitro 用作 Vite 插件）。

⚡ 性能改进

我们还发布了几项性能增强

• 预计算渲染器依赖项 – 我们现在在构建时而不是运行时计算渲染器依赖项，从而改善了冷启动和初始渲染性能（#33361)
• 减少依赖项 – 从 kit 和 schema 包中删除了不必要的依赖项（7ae2cf563)

📉 异步数据处理程序提取

最令人兴奋的性能改进之一是新的实验性异步数据处理程序提取（#33131）。启用后，传递给 useAsyncData 和 useLazyAsyncData 的处理程序函数会自动提取到单独的块中并动态导入。

这对于预渲染静态站点特别有效，因为数据获取逻辑仅在构建时需要，并且可以完全从客户端捆绑包中排除。

<script setup lang="ts">
// This handler will be extracted into a separate chunk
// and only loaded when needed
const { data: post } = await useAsyncData('post', async () => {
  const content = await queryContent(`/blog/${route.params.slug}`).findOne()
  
  // Complex data processing that you don't want in the client bundle
  const processed = await processMarkdown(content)
  const related = await findRelatedPosts(content.tags)
  
  return {
    ...processed,
    related
  }
})
</script>

对于静态/预渲染站点，请在您的配置中启用它

export default defineNuxtConfig({
  experimental: {
    extractAsyncDataHandlers: true
  }
})

然后，在预渲染时，提取的处理程序会从您的客户端捆绑包中进行 tree-shaking，因为数据已在有效负载中可用。这使得交付给用户的 JavaScript 文件明显更小。

🔧 实验性 TypeScript 插件支持

我们通过@dxup/nuxt模块引入了对增强 TypeScript 开发体验的实验性支持。

此模块添加了许多 TypeScript 插件，旨在改善您在使用 Nuxt 特定功能时的体验

• 智能组件重命名：当您重命名自动导入的组件文件时，自动更新所有引用
• 动态导入的转到定义：当使用诸如 import(`~/assets/${name}.webp`) 的 glob 模式时，直接导航到文件
• Nitro 路由导航：从数据获取函数（$fetch、useFetch、useLazyFetch）跳转到服务器路由处理程序
• 运行时配置导航：转到定义与运行时配置属性无缝协作
• 增强的自动导入支持：包括@dxup/unimport插件，用于更好地导航自动导入的组合式函数和实用工具

要启用此功能，请在您的 Nuxt 配置中将 experimental.typescriptPlugin 设置为 true

export default defineNuxtConfig({
  experimental: {
    typescriptPlugin: true
  }
})

启用后，Nuxt 将自动安装和配置模块。

🎁 其他改进

• 组件 declarationPath – 您现在可以为组件指定自定义声明路径（#33419)
• 模块解析扩展 – Kit 的 resolveModule 现在接受 extensions 选项（#33328)
• 全局头部实用工具 – Kit 中新的 setGlobalHead 实用工具，用于更轻松的头部管理（#33512)

🩹 重要修复

• 现在，基于 routeRules 重定向时，路由哈希得以保留（#33222)
• 修复了 loadNuxtConfig 的并发调用并进行了适当的清理（#33420)
• 对象格式的 href 现在在 <NuxtLink> 中正常工作（c69e4c30d)
• 组件自动导入现在可以作为 Vue 的 h() 函数的参数（#33509)
• 修复了 HMR 期间的应用程序配置数组处理（#33555)

✅ 升级

我们建议升级时运行

npx nuxt upgrade --dedupe

这将刷新您的 lockfile 并拉取 Nuxt 所依赖的所有最新依赖项，尤其是来自 unjs 生态系统的依赖项。

👉 完整发布说明

感谢你阅读到这里！我们希望你喜欢这个新版本。如果你有任何反馈或问题，请告诉我们。

祝您 Nuxting 愉快 ✨