---
title: "Nuxt 3.11"
description: "Nuxt 3.11 已发布 - 带来更好的日志记录、预览模式、服务器页面以及更多功能！"
canonical_url: "https://nuxt.zhcndoc.com/blog/v3-11"
---
# Nuxt 3.11

> Nuxt 3.11 已发布 - 带来更好的日志记录、预览模式、服务器页面以及更多功能！

这可能是 Nuxt v4 之前的最后一个次要版本，因此我们将其打包了许多功能和改进，希望能够让您满意！✨

## 🪵 更好的日志记录

当您开发 Nuxt 应用，并在应用中使用 `console.log` 时，您可能已经注意到在刷新页面时（在服务器端渲染期间），这些日志不会显示在浏览器控制台中。这可能让调试应用变得很困难。但这已经成为过去！

现在，当您有与请求关联的服务器日志时，它们将被整合并传递给客户端，并在浏览器控制台中显示。[异步上下文](https://nodejs.org/docs/latest-v20.x/api/async_context.html) 用于跟踪和关联触发这些日志的请求。([#25936](https://github.com/nuxt/nuxt/pull/25936))。

例如，以下代码：

```vue [pages/index.vue]
<script setup>
console.log('来自 index 页面的日志')

const { data } = await useAsyncData(() => {
  console.log('来自 useAsyncData 内的日志')
  return $fetch('/api/test')
})
</script>
```

现在，在您刷新页面时，它将在浏览器控制台中进行日志记录：

```bash
来自 index 页面的日志
[ssr] 来自 useAsyncData 内的日志 
    位于 pages/index.vue
```

👉 我们还计划未来支持将后续日志流式传输到 Nuxt DevTools。

我们还添加了 `dev:ssr-logs` 钩子（在 Nuxt 和 Nitro 中都有效），该钩子在服务器和客户端上调用，允许您自行处理日志。

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

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  features: {
    devLogs: false
    // 或 'silent'，以便您通过 `dev:ssr-logs` 钩子处理
  },
})
```

## 🎨 预览模式

新的 `usePreviewMode` 组合式函数旨在在 Nuxt 应用中轻松使用预览模式。

```ts [plugins/test.client.ts]
const { enabled, state } = usePreviewMode()
```

在启用预览模式时，所有数据获取的组合式函数，如 `useAsyncData` 和 `useFetch`，将重新运行，这意味着负载中的缓存数据将被绕过。

::read-more{to="https://nuxt.zhcndoc.com/docs/api/composables/use-preview-mode"}
::

## 💰 更新缓存

现在，如果您没有禁用 Nuxt 的应用程序清单，我们将自动更新缓存中的负载，这意味着在部署后您不会遇到过时的数据 ([#26068](https://github.com/nuxt/nuxt/pull/26068))。

## 👮‍♂️ 中间件 `routeRules`

现在可以在 Vue 应用程序部分（即非 Nitro 路由部分）为页面路径定义中间件了（[#25841](https://github.com/nuxt/nuxt/pull/25841)）。

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  routeRules: {
    '/admin/**': {
      // 或 appMiddleware: 'auth'
      appMiddleware: ['auth']
    },
    '/admin/login': {
      // 您可以“关闭”将为页面运行的中间件
      appMiddleware: {
        auth: false
      }
    },
  },
})
```

::read-more{to="https://nuxt.zhcndoc.com/docs/guide/concepts/rendering#route-rules"}
::

## ⌫ 新的数据获取实用程序 `clear`

现在，`useAsyncData` 和 `useFetch` 提供了一个名为 `clear` 的实用程序。这是一个可用于将 `data` 设置为未定义，将 `error` 设置为 `null`，将 `pending` 设置为 `false`，将 `status` 设置为 `idle`，并标记任何当前挂起的请求为取消的函数 ([#26259](https://github.com/nuxt/nuxt/pull/26259))

```vue
<script setup lang="ts">
const { data, clear } = await useFetch('/api/test')

const route = useRoute()
watch(() => route.path, (path) => {
  if (path === '/') clear()
})
</script>
```

::read-more{to="https://nuxt.zhcndoc.com/docs/getting-started/data-fetching"}
::

## 🕳️ 新的 `#teleports` 目标

现在，在您的应用程序中的 `<body>` 标签内，Nuxt 将包含一个新的 `<div id="teleports"></div>` 元素。它支持服务器端传输，这意味着您可以在服务器上安全地执行以下操作：

```vue [app.vue]
<template>
  <Teleport to="#teleports">
    <span>
      某些内容
    </span>
  </Teleport>
</template>
```

## 🚦 加载指示器和过渡控制

现在，可以为隐藏加载指示器和强制使用 `finish()` 方法设置自定义时机了 ([#25932](https://github.com/nuxt/nuxt/pull/25932))。

如果启用了该功能，还有一个新的 `page:view-transition:start` 钩子可供使用以钩入视图过渡 API ([#26045](https://github.com/nuxt/nuxt/pull/26045))。

## 🛍️ 仅服务器和客户端的页面

此版本引入了在 Nuxt 中支持仅服务器和客户端的页面！现在，您可以通过给页面添加 `.server.vue` 或 `.client.vue` 后缀来自动处理它们。

**客户端页面** 将完全在客户端上呈现，并完全跳过服务器端渲染，就好像整个页面被包装在 `<ClientOnly>` 中一样。请谨慎使用，客户端的加载会导致糟糕的用户体验，因此确保您真的需要避免服务器端加载。您还可以考虑使用带有 `fallback` 插槽的 `<ClientOnly>` 来呈现骨架加载器 ([#25037](https://github.com/nuxt/nuxt/pull/25037))。

⚗️ **服务器端页面** 更加有用，因为它们使您能够在客户端导航中集成完全服务器端渲染的 HTML。甚至在链接到它们的链接在视口中时，它们也将被预取，因此您将获得即时加载 ([#24954](https://github.com/nuxt/nuxt/pull/24954))。

## 🤠 服务器组件盛宴

当您使用服务器组件时，您现在可以在树的任何位置使用 `nuxt-client` 属性 ([#25479](https://github.com/nuxt/nuxt/pull/25479))。

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  experimental: {
    componentIslands: {
      selectiveClient: 'deep'
    }
  },
})
```

您可以监听服务器组件的 `@error` 事件，以便在加载组件时出现任何问题时触发该事件 ([#25798](https://github.com/nuxt/nuxt/pull/25798))。

最后，当您的项目或其任何层中有仅服务器组件或仅服务器页面时，servers-only 组件将被智能启用 ([#26223](https://github.com/nuxt/nuxt/pull/26223))。

::callout{type="warning"}
服务器组件仍然处于试验阶段，其 API 可能会发生变化，因此在依赖于实现细节之前，请小心。
::

## 🔥 性能改进

我们提供了许多性能改进，包括仅更新更改的虚拟模板 ([#26250](https://github.com/nuxt/nuxt/pull/26250))，使用“分层”的预渲染缓存 ([#26104](https://github.com/nuxt/nuxt/pull/26104)) 在预渲染时回退到文件系统而不是在内存中保存所有内容 - 还有其他许多改进示例。

## 📂 处理公共资源

我们已重新实现了 Vite 的公共资源处理，这意味着您 `public/` 目录或层目录中的公共资源现在完全由 Nuxt 解析 ([#26163](https://github.com/nuxt/nuxt/pull/26163))，因此，如果您已添加 `nitro.publicAssets` 目录并具有自定义前缀，则现在将起作用。

## 📦 分块命名

我们已更改了默认的 JS 分块文件名模式 `_nuxt/[name].[hash].js`。现在，我们默认使用 `_nuxt/[hash].js`。这是为了避免进行组件或块名称触发 adblocker 导致误报的问题，这可能是一个非常难以调试的问题。 ([#26203](https://github.com/nuxt/nuxt/pull/26203))

如果您希望恢复到以前的行为，您可以轻松进行配置：

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

## 💪 类型修复

以前，如果 `shamefully-hoist=false` 的用户可能会遇到类型未解析或工作不正确的问题。您还可能遇到大量类型实例化的问题。

现在，我们尝试告诉 TypeScript 关于某些关键类型，以便即使嵌套深入，它们也可以解析（[#26158](https://github.com/nuxt/nuxt/pull/26158)）。

还有许多其他类型修复，包括一些与导入类型有关的修复（[#26218](https://github.com/nuxt/nuxt/pull/26218) 和 [#25965](https://github.com/nuxt/nuxt/pull/25965)），以及模块类型的修复（[#25548](https://github.com/nuxt/nuxt/pull/25548)）。

## ✅ 升级

像往常一样，我们建议升级 Nuxt，只需运行：

```bash
nuxi upgrade --force
```

这将刷新您的 lockfile，并确保您从 Nuxt 依赖的其他依赖项中获取更新，特别是在 unjs 生态系统中。

## 👉 完整发布说明

::read-more{icon="i-simple-icons-github" target="_blank" to="https://github.com/nuxt/nuxt/releases/tag/v3.11.0"}
阅读完整的 Nuxt `v3.11.0` 发布说明。
::

感谢您一直阅读到这里！我们希望您喜欢这个新版本。如果您有任何反馈或问题，请告诉我们。

**快乐 Nuxt 之旅 ✨**


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.