3 月 18 日,Nuxt 团队成员 daniel roe 声称 Nuxt v3.11 已发布,这可能是 Nuxt v4 到来之前的最后一个小版本,因此在改版中加入了大量功能和改进。
主要特性如下:
- 🪵 浏览器中的服务器日志
- 🎨 预览模式
- 👮♂️ 中间件路由规则
- 🛍️ 仅服务器和客户端页面
- 📂 重写的公共资产
- ✨ 自动启用的服务器组件
🪵 更好的日志记录
在开发 Nuxt 应用程序并在应用程序中使用 console.log
时,您可能已经注意到当刷新页面(在服务器端渲染期间)时,这些日志不会显示在浏览器控制台中。这可能令人沮丧,因为它使得调试应用程序变得困难。但现在这已成为过去!
现在,当您有与请求相关联的服务器日志时,它们将被捆绑并传递给客户端,并显示在您的浏览器控制台中。异步上下文被用来跟踪和关联这些日志与触发它们的请求。
html
<script setup>
console.log('Log from index page')
const { data } = await useAsyncData(() => {
console.log('Log inside useAsyncData')
return $fetch('/api/test')
})
</script>
当您刷新页面时,将立即记录到您的浏览器控制台中:
js
Log from index page
[ssr] Log inside useAsyncData
at pages/index.vue
👉 我们还计划在未来支持将后续日志流式传输到 Nuxt DevTools。
我们还添加了一个 dev:ssr-logs 钩子(在 Nuxt 和 Nitro 中都有),该钩子在服务器和客户端上调用,允许您自行处理它们。
如果您遇到任何问题,可以禁用它们 - 或阻止它们记录到浏览器控制台中。
js
export default defineNuxtConfig({
features: {
devLogs: false
// 或者选择 "silent" 以允许您自行处理 "dev:ssr-logs" 挂钩
},
})
🎨 预览模式
一个新的 usePreviewMode 组合旨在使在您的 Nuxt 应用程序中使用预览模式变得简单。
js
const { enabled, state } = usePreviewMode()
当预览模式启用时,所有数据获取的组合函数,如 useAsyncData 和 useFetch 将重新运行,这意味着负载中的任何缓存数据都将被绕过。
💰 缓存破坏负载
如果您没有禁用 Nuxt 的应用程序清单,Nuxt 现在会自动缓存刷新您的有效负载,这意味着在部署后您不应该被过时数据困扰。
👮♂️ 中间件路由规则
现在可以在应用程序的 Vue 实例部分(即不是您的 Nitro 路由)中为页面路径定义中间件。
js
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
}
},
},
})
⌫ 清除数据实用程序
useAsyncData 和 useFetch 公开了一个清除的实用程序。 这是一个可以用来将数据设置为 undefined、将错误设置为 null、将挂起设置为 false、将状态设置为 idle,并标记任何当前挂起的请求为已取消的函数。
html
<script setup lang="ts">
const { data, clear } = await useFetch('/api/test')
const route = useRoute()
watch(() => route.path, (path) => {
if (path === '/') clear()
})
</script>
🕳️ 新的 teleports 元素
现在 Nuxt 在您的应用程序中包含一个新的 <div id="teleports"></div>
元素,位于您的 <body>
标签内。它支持服务器端传送,这意味着您可以安全地在服务器上执行此操作:
html
<template>
<Teleport to="#teleports">
<span>
Something
</span>
</Teleport>
</template>
🛍️ 仅服务器和客户端页面
此版本中 Nuxt 引入了仅服务器端和仅客户端页面,您现在可以给一个页面添加 .server.vue
或 .client.vue
后缀来自动处理它。
仅客户端页面将完全在客户端渲染,并跳过服务器端渲染,就像整个页面包裹在 <ClientOnly>
中一样。客户端加载时的闪烁可能会给用户带来不好的体验,因此确保您真正需要避免服务器端加载。还要考虑使用 <ClientOnly>
与 fallback 插槽以呈现骨架加载器。
⚗️ 仅服务器端页面更加有用,因为它们使您能够在客户端导航中集成完全由服务器渲染的 HTML。当链接到这些页面时,在视口内预取它们 - 这样您将获得即时加载效果。
🤠 服务器组件
当您使用服务器组件时,现在可以在树的任何位置使用 nuxt-client 属性。
js
export default defineNuxtConfig({
experimental: {
componentIslands: {
selectiveClient: 'deep'
}
},
})
您可以从服务器组件中侦听@error事件,如果加载组件时出现任何问题,该事件将被触发。
最后,在项目或其任何层中具有仅限服务器的组件或仅限服务器页面时,现在智能启用了仅限服务器的组件。
服务器组件仍处于实验阶段,其API可能会更改,请在依赖于实施细节之前小心。
🔥 性能改进
我们已经推出了许多性能改进,包括仅更新更改的虚拟模板,使用一个"分层"预渲染缓存,当预渲染时回退到文件系统而不是将所有内容保留在内存中 - 还有很多其他例子。
📂 公共资产处理
我们已经重新实现了 Vite 的公共资产处理,这意味着您 public/
目录或您的层目录中的公共资产现在完全由 Nuxt 解析,因此如果您添加了带有自定义前缀的 nitro.publicAssets
目录,则这些将起作用。
📦 块命名
我们已更改了默认的 _nuxt/[name].[hash].js
文件名模式,用于您的 JS 块。现在,默认为 _nuxt/[hash].js
。这是为了避免广告拦截器通过触发组件或块名称而产生误报,这可能是一个非常难以调试的问题。
您可以轻松配置此选项,以恢复到先前的行为。
js
export default defineNuxtConfig({
vite: {
$client: {
build: {
rollupOptions: {
output: {
chunkFileNames: '_nuxt/[name].[hash].js',
entryFileNames: '_nuxt/[name].[hash].js'
}
}
}
}
},
})
💪 类型修复
以前,具有 shamefully-hoist=false
的用户可能会遇到类型未解析或无法正常工作的问题。您可能还遇到了过多类型实例化的问题。
我们现在尝试告诉 TypeScript 关于某些关键类型,以便它们可以被解析,即使是深度嵌套的情况下。还有一系列其他类型修复,包括一些与导入类型和模块 typings 相关的内容。
✅ 升级
像往常一样,我们升级 Nuxt 的建议是运行:
bash
nuxi upgrade --force
这将刷新您的锁定文件,并确保您拉取其他依赖项的更新,Nuxt 依赖于 unjs 生态系统中特别重要的部分。
参考链接:nuxt.com/blog/v3-11