这可能是 Nuxt v4 发布前的最后一个次要版本，所以我们为它 packed 满了我们希望你会喜欢的功能和改进！✨
🪵 更好的日志记录
在开发 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 设置为 undefined，将 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 目录，这些现在将起作用。
📦 块命名
我们更改了 JavaScript 块的默认文件命名模式 _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
这也将刷新你的 lockfile，并确保你拉取 Nuxt 依赖的其他依赖项（尤其是在 unjs 生态系统中）的更新。
👉 完整发布说明
感谢你阅读到这里！我们希望你喜欢这个新版本。如果你有任何反馈或问题，请告诉我们。
快乐 Nuxting ✨