这可能是 Nuxt v4 之前的最后一个小版本，因此我们打包了许多我们希望您会喜欢的功能和改进！✨
🪵 更好的日志记录
在开发 Nuxt 应用程序并在应用程序中使用 console.log 时，您可能已经注意到，在刷新页面时（在服务器端渲染期间），这些日志不会显示在您的浏览器控制台中。 这可能会令人沮丧，因为它使得调试应用程序变得困难。 这现在已经成为过去！
现在，当您有与请求关联的服务器日志时，它们将被打包并传递到客户端，并显示在您的浏览器控制台中。 异步上下文 用于跟踪这些日志并将它们与触发它们的请求关联。 (#25936)。
例如，这段代码
<script setup>
console.log('Log from index page')
const { data } = await useAsyncData(() => {
console.log('Log inside useAsyncData')
return $fetch('/api/test')
})
</script>
现在，当您刷新页面时，它将记录到您的浏览器控制台
Log from index page
[ssr] Log inside useAsyncData
at pages/index.vue
👉 我们还计划在未来支持将后续日志流式传输到 Nuxt DevTools 中。
我们还添加了一个 dev:ssr-logs 钩子（在 Nuxt 和 Nitro 中），该钩子在服务器和客户端上调用，如果您愿意，允许您自己处理它们。
如果您遇到任何问题，可以禁用它们 - 或阻止它们记录到您的浏览器控制台。
export default defineNuxtConfig({
features: {
devLogs: false
// or 'silent' to allow you to handle yourself with `dev:ssr-logs` hook
},
})
🎨 预览模式
一个新的 usePreviewMode 可组合项旨在简化在 Nuxt 应用程序中使用预览模式。
const { enabled, state } = usePreviewMode()
当启用预览模式时，所有数据获取可组合项（如 useAsyncData 和 useFetch）都将重新运行，这意味着有效负载中的任何缓存数据都将被绕过。
💰 缓存失效有效负载
如果您没有禁用 Nuxt 的应用程序清单，我们现在会自动使您的有效负载缓存失效，这意味着您在部署后不应该卡在过时的数据上 (#26068)。
👮♂️ 中间件 routeRules
现在可以在应用程序的 Vue 部分（即，不是您的 Nitro 路由）中为页面路径定义中间件 (#25841)。
export default defineNuxtConfig({
routeRules: {
'/admin/**': {
// or appMiddleware: 'auth'
appMiddleware: ['auth']
},
'/admin/login': {
// You can 'turn off' middleware that would otherwise run for a page
appMiddleware: {
auth: false
}
},
},
})
⌫ 新的 clear 数据获取实用程序
现在，useAsyncData 和 useFetch 公开了一个 clear 实用程序。 这是一个可用于将 data 设置为未定义，将 error 设置为 null，将 pending 设置为 false，将 status 设置为 idle 的函数，并将任何当前挂起的请求标记为已取消。 (#26259)
<script setup lang="ts">
const { data, clear } = await useFetch('/api/test')
const route = useRoute()
watch(() => route.path, (path) => {
if (path === '/') clear()
})
</script>
🕳️ 新的 #teleports 目标
Nuxt 现在在您的应用程序的 <body> 标签中包含一个新的 <div id="teleports"></div> 元素。 它支持服务器端传送，这意味着您可以在服务器上安全地执行此操作
<template>
<Teleport to="#teleports">
<span>
Something
</span>
</Teleport>
</template>
🚦 加载指示器和过渡控制
现在可以设置用于隐藏加载指示器的自定义时间，并在需要时强制执行 finish() 方法 (#25932)。
如果您启用了该功能，还有一个新的 page:view-transition:start 钩子，用于挂接到 View Transitions API (#26045)。
🛍️ 仅服务器端和仅客户端页面
此版本看到了仅服务器端和仅客户端页面在 Nuxt 中的落地！ 现在，您可以将 .server.vue 或 .client.vue 后缀添加到页面，以实现对其的自动处理。
仅客户端页面 将完全在客户端呈现，并完全跳过服务器端渲染，就像整个页面都包裹在 <ClientOnly> 中一样。 请负责任地使用此功能。 客户端上的加载闪烁可能是不良的用户体验，因此请确保您确实需要避免服务器端加载。 还可以考虑使用带有 fallback 插槽的 <ClientOnly> 来呈现骨架加载器 (#25037)。
⚗️ 仅服务器端页面 更有用，因为它们使您能够在客户端导航中集成完全服务器渲染的 HTML。 当指向它们的链接在视口中时，它们甚至会被预取 - 因此您将获得即时加载 (#24954)。
🤠 服务器组件盛宴
当您使用服务器组件时，现在可以在树中的任何位置使用 nuxt-client 属性 (#25479)。
export default defineNuxtConfig({
experimental: {
componentIslands: {
selectiveClient: 'deep'
}
},
})
您可以从服务器组件侦听 @error 事件，如果加载组件时出现任何问题，将触发该事件 (#25798)。
最后，当您的项目或其任何层中存在仅服务器端组件或仅服务器端页面时，现在会智能地启用仅服务器端组件 (#26223)。
🔥 性能改进
我们发布了许多性能改进，包括仅更新已更改的虚拟模板 (#26250)，使用“分层”预渲染缓存 (#26104)，当预渲染时回退到文件系统而不是将所有内容保存在内存中 - 以及许多其他示例。
📂 公共资源处理
我们已经发布了对 Vite 的公共资源处理的重新实现，这意味着您 public/ 目录或图层目录中的公共资源现在完全由 Nuxt 解析 (#26163)，因此，如果您使用自定义前缀添加了 nitro.publicAssets 目录，它们现在可以工作。
📦 代码块命名
我们更改了 JS 代码块的默认 _nuxt/[name].[hash].js 文件名模式。 现在，我们默认为 _nuxt/[hash].js。 这是为了避免广告拦截器触发您的组件或代码块名称而产生误报，这可能是一个非常难以调试的问题。 (#26203)
如果您愿意，您可以轻松地配置此项以恢复到以前的行为
export default defineNuxtConfig({
vite: {
$client: {
build: {
rollupOptions: {
output: {
chunkFileNames: '_nuxt/[name].[hash].js',
entryFileNames: '_nuxt/[name].[hash].js'
}
}
}
}
},
})
💪 类型修复
以前，使用 shamefully-hoist=false 的用户可能会遇到类型无法解析或无法正常工作的问题。 您可能还遇到了类型实例化过多的问题。
我们现在尝试告诉 TypeScript 关于某些关键类型，以便即使在深度嵌套的情况下也可以解析它们 (#26158)。
还有一大堆其他类型修复，包括一些关于导入类型的修复 (#26218 和 #25965) 和模块类型定义 (#25548)。
✅ 升级
与往常一样，我们升级 Nuxt 的建议是运行
nuxi upgrade --force
这也会刷新您的锁定文件，并确保您从 Nuxt 依赖的其他依赖项（尤其是在 unjs 生态系统中）中提取更新。
👉 完整的发行说明
感谢您阅读到这里！ 我们希望您喜欢新版本。 如果您有任何反馈或问题，请务必告诉我们。
Nuxting 快乐 ✨