这可能是 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 钩子,用于在启用 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).
)相关的问题。
nuxi upgrade --force
这也将刷新你的 lockfile,并确保你拉取 Nuxt 依赖的其他依赖项(尤其是在 unjs 生态系统中)的更新。
感谢你阅读到这里!我们希望你喜欢这个新版本。如果你有任何反馈或问题,请告诉我们。
祝您 Nuxting 愉快 ✨