发布· 2024年3月16日

Nuxt 3.11

Nuxt 3.11 正式发布了——带来了更好的日志记录、预览模式、服务器页面等更多功能！

Daniel Roe

@danielroe.dev

这很可能是 Nuxt v4 之前的最后一个小版本更新，因此我们塞满了各种功能和改进，希望你们会喜欢！✨

🪵 更好的日志记录

当你在开发 Nuxt 应用并使用 console.log 时，你可能注意到在页面刷新（服务器端渲染期间）时，这些日志并不会显示在浏览器控制台中。这可能会让人感到沮丧，因为这使得调试应用变得困难。而现在，这种情况已成历史！

现在，当你的请求关联到服务器端日志时，它们会被打包并传递给客户端，显示在你的浏览器控制台中。异步上下文用于跟踪并将这些日志与触发它们的请求相关联。（#25936).

例如，这段代码

pages/index.vue

<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 中均有），它在服务器和客户端上都会被调用，允许你在需要时自行处理这些日志。

如果你在使用中遇到任何问题，可以选择禁用它们，或者防止它们记录到你的浏览器控制台。

nuxt.config.ts

export default defineNuxtConfig({
  features: {
    devLogs: false
    // or 'silent' to allow you to handle yourself with `dev:ssr-logs` hook
  },
})

🎨 预览模式

一个新的 usePreviewMode 可组合函数旨在简化 Nuxt 应用中预览模式的使用。

plugins/test.client.ts

const { enabled, state } = usePreviewMode()

当开启预览模式时，所有数据获取相关的可组合函数（如 useAsyncData 和 useFetch）都将重新运行，这意味着负载（payload）中的任何缓存数据都将被绕过。

阅读更多内容请查看文档 > API > Composables > Use Preview Mode。

💰 负载缓存清理 (Cache-busting)

如果你没有禁用 Nuxt 的应用清单（app manifest），我们现在会自动清理你的负载缓存，这意味着部署后你不会再被旧数据所困扰（#26068).

👮‍♂️ 中间件 `routeRules`

现在可以在应用的 Vue 部分（即非 Nitro 路由）内为页面路径定义中间件了（#25841).

nuxt.config.ts

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> 元素。它支持服务器端传送（Teleports），意味着你可以在服务器上安全地执行此操作

app.vue

<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).

nuxt.config.ts

export default defineNuxtConfig({
  experimental: {
    componentIslands: {
      selectiveClient: 'deep'
    }
  },
})

你可以监听来自服务器组件的 @error 事件，该事件会在加载组件出现任何问题时触发（#25798).

最后，当你项目或任何层（layers）中存在仅服务器组件或仅服务器页面时，仅服务器组件会被智能地启用（#26223).

服务器组件仍处于实验阶段，其 API 可能会发生变化，因此在依赖具体实现细节前请谨慎。

nuxt.config.ts

export default defineNuxtConfig({
  vite: {
    $client: {
      build: {
        rollupOptions: {
          output: {
            chunkFileNames: '_nuxt/[name].[hash].js',
            entryFileNames: '_nuxt/[name].[hash].js'
          }
        }
      }
    }
  },
})