这可能是 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
设置为 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
钩子用于挂接到视图转换 API(#26045)。
🛍️ 服务器端和客户端页面
此版本在 Nuxt 中引入了服务器端和客户端页面!您现在可以添加.server.vue
或.client.vue
后缀到页面以自动处理它。
**客户端页面**将完全在客户端渲染,并完全跳过服务器端渲染,就像整个页面都包装在<ClientOnly>
中一样。请谨慎使用。客户端的加载闪烁可能会导致糟糕的用户体验,因此请确保您确实需要避免服务器端加载。还可以考虑将<ClientOnly>
与fallback
插槽一起使用以渲染骨架加载器(#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 ✨