地表最强的 Vue 生态元框架！Nuxt 3 最后一个次版本正式发布！

《前端暴走团》，喜欢请抱走~大家好，我是团长林语冰。

近年来，主流 JS 库/框架的生态系统孵化了若干元框架（meta framework），包括但不限于 React 生态系统的 Next 和 Remix，Vue 生态系统的 Nuxt 等。

元框架由于构建在人气爆棚的主流前端框架之上，且提供了周边生态的组合全家桶，如今在前端开发中人气和热度越来越高。在去年的 JS 现状调查中，已经可以看到元框架是大势所趋，而且元框架拿到知名企业的资本注入也明显呈现上升趋势。

Vue 生态系统中，目前人气最高的元框架就是 Nuxt。Nuxt 是一个开源框架，旨在使 Web 开发变得直观且强大，充满信心地创建高性能和生产级的全栈 Web 应用程序和网站。

今年三月中旬，Nuxt 团队官宣 Nuxt 3.11 正式发布，这可能是 Nuxt 4 之前的最后一个语义化次版本升级，因此我们对其进行了全面的功能封装和改进，期望大家能够满意！

免责声明

本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考。英文原味版请传送 Nuxt 3.11。

更好的日志记录

当开发 Nuxt 应用程序、并在其中使用 console.log 时，你可能已经注意到，在 SSR（服务端渲染）期间刷新页面时，这些日志不会显示在浏览器控制台中。这可能有点操蛋，因为它使调试应用程序难如脱单。现在这种不便已经成为过去式了！

在 Nuxt 3.11 中，当我们拥有与请求关联的服务器日志时，它们会被打包并传递到客户端，且显示在浏览器控制台中。异步上下文用于跟踪这些日志，并将其与触发它们的请求关联起来。

举个栗子，下面这段代码：

html 复制代码

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

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

现在，当我们刷新页面时，这会打印到浏览器的控制台：

md 复制代码

来自 index 页面的日志
[ssr] useAsyncData 内部的日志 at pages/index.vue

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

我们还在 Nuxt 和 Nitro 中添加了一个 dev:ssr-logs 钩子，这会在服务器和客户端上调用，允许我们按需自行处理。

如果遭遇任何问题，我们可以禁用它们，或者阻止它们打印到浏览器的控制台。

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 等所有数据请求组合式函数都会重新运行，这意味着，负载（payload）中的任何缓存数据都会被绕过。

缓存破坏负载

如果您没有禁用 Nuxt 的应用程序清单（manifest），我们现在会自动缓存您的有效负载，这意味着，您在部署后不应陷入过时的数据。

中间件 `routeRules`

现在可以在应用程序的 Vue 应用程序部分，即不是 Nitro 路由，在其中为页面路径定义中间件。

ts 复制代码

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/admin/**': {
      // 或者写成 appMiddleware: 'auth'
      appMiddleware: ['auth']
    },
    '/admin/login': {
      // 您可以关闭原本会为页面运行的中间件
      appMiddleware: {
        auth: false
      }
    }
  }
})

新的 `clear` 数据请求工具

现在，useAsyncData 和 useFetch 会暴露一个 clear 实用程序。clear 函数可用于将 data 设置为 undefined，将 error 设置为 null，将 pending 设置为 false，将 status 设置为 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 现在在您的应用程序的 <body> 标签中包含一个新的 <div id="teleports"></div> 元素。它支持服务端传输，这意味着，您可以在服务器上安全地执行下列操作：

html 复制代码

<template>
  <Teleport to="#teleports">
    <span>Hello Nuxt</span>
  </Teleport>
</template>

加载指示器和过渡控件

现在可以设置自定义时间来隐藏加载指示器，如有必要也可以强制使用 finish() 方法。

如果您启用了 View Transitions（视图过渡）API，还有一个新的 page:view-transition:start 钩子可用。

仅服务器和客户端页面

在 Nuxt 3.11 中，仅服务器和客户端页面登陆 Nuxt！您现在可以向页面添加 .server.vue 或 .client.vue 后缀来自动处理它。

仅客户端页面 （Client-only pages）会完全在客户端渲染，并完全跳过 SSR（服务端渲染），就像整个页面都包裹在 <ClientOnly> 中一样。请负责任地使用它。客户端的加载闪屏可能会带来糟糕的用户体验，因此请确保您确实需要避免服务端加载。还可以考虑使用带有 fallback 插槽的 <ClientOnly> 来渲染骨架加载器。

仅服务器页面（Server-only pages）更加好用，因为它们使您能够将完全 SSR 的 HTML 集成到客户端导航中。当它们的链接位于视口中时，它们甚至会被预请求，因此您会获得即时加载。

服务器组件富矿

当使用服务器组件（server components）时，您现在可以在树中的任意位置使用 nuxt-client 属性。

ts 复制代码

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    componentIslands: {
      selectiveClient: 'deep'
    }
  }
})

您可以侦听来自服务器组件的 @error 事件，如果加载组件出现任何问题，该事件就会被触发。

最后，当您的项目或其任何层级中有仅服务器组件或仅服务器页面时，现在可以智能地启动仅服务器组件。

服务器组件仍处于实验阶段，其 API 可能会发生变化，因此在依赖实现细节之前要小心。

性能优化

我们已经提供了许多性能优化，包括仅更新更改的虚拟模板，使用"分层"预渲染缓存，该缓存回退到文件系统，而不是在预渲染时将所有内容保留在内存中。

公共资源处理

我们重新实现了 Vite 的公共资源处理，这意味着，您的 public/ 目录或 layer 目录中的公共资源现在完全由 Nuxt 解析，因此如果您添加了 nitro.publicAssets，现在这些会奏效。

组块命名

我们更改了 JS 组块默认的 _nuxt/[name].[hash].js 文件名模式。现在，我们默认为 _nuxt/[hash].js。这是为了避免广告拦截器触发组件或组块名称而产生误报，这可能是一个非常难以调试的问题。

如果您愿意，您可以轻松配置它，恢复到以前的行为：

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 的用户可能会遭遇类型无法解析或无法正常奏效的问题。您可能还遭遇过多类型实例化的问题。

我们现在尝试告诉 TS 某些关键类型，这样即使深度嵌套也可以解析它们。

还有大量其他类型修复，包括某些有关导入类型和模块类型的修复。

升级

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

bash 复制代码

nuxi upgrade --force

这也会刷新您的锁定文件（lockfile ），并确保您从 Nuxt 依赖的其他依赖中拉取更新，尤其是在 unjs 生态系统中。

本期话题是 ------ 你最喜欢或最常用的 Nuxt 新功能是什么？

欢迎在本文下方自由言论，文明共享。谢谢大家的点赞，掰掰~

《前端暴走团》，喜欢请抱走~坚持阅读，每天一次，进步一点。

地表最强的 Vue 生态元框架！Nuxt 3 最后一个次版本正式发布！

更好的日志记录

预览模式

缓存破坏负载

中间件 routeRules

新的 clear 数据请求工具

新的 #teleports 目标

加载指示器和过渡控件

仅服务器和客户端页面

服务器组件富矿

性能优化

公​​共资源处理

组块命名

类型修复

升级

中间件 `routeRules`

新的 `clear` 数据请求工具

公共资源处理