Nuxt v3 最后一个版本已发布，Nuxt v4 即将到来！

最新推荐文章于 2024-09-18 15:38:24 发布

一纸忘忧

最新推荐文章于 2024-09-18 15:38:24 发布

阅读量749

点赞数 12

文章标签：前端 node.js vue.js express npm typescript

本文链接：https://blog.csdn.net/ikxin/article/details/136898871

版权

3 月 18 日，Nuxt 团队成员 daniel roe 声称 Nuxt v3.11 已发布，这可能是 Nuxt v4 到来之前的最后一个小版本，因此在改版中加入了大量功能和改进。

主要特性如下：

🪵 浏览器中的服务器日志
🎨 预览模式
👮‍♂️ 中间件路由规则
🛍️ 仅服务器和客户端页面
📂 重写的公共资产
✨ 自动启用的服务器组件

🪵 更好的日志记录

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

现在，当您有与请求相关联的服务器日志时，它们将被捆绑并传递给客户端，并显示在您的浏览器控制台中。异步上下文被用来跟踪和关联这些日志与触发它们的请求。

<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
    // 或者选择 "silent" 以允许您自行处理 "dev:ssr-logs" 挂钩
  },
})

🎨 预览模式

一个新的 usePreviewMode 组合旨在使在您的 Nuxt 应用程序中使用预览模式变得简单。

const { enabled, state } = usePreviewMode()

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

💰 缓存破坏负载

如果您没有禁用 Nuxt 的应用程序清单，Nuxt 现在会自动缓存刷新您的有效负载，这意味着在部署后您不应该被过时数据困扰。

👮‍♂️ 中间件路由规则

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

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，并标记任何当前挂起的请求为已取消的函数。

<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> 标签内。它支持服务器端传送，这意味着您可以安全地在服务器上执行此操作：

<template>
  <Teleport to="#teleports">
    <span>
      Something
    </span>
  </Teleport>
</template>

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

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

仅客户端页面将完全在客户端渲染，并跳过服务器端渲染，就像整个页面包裹在 <ClientOnly> 中一样。客户端加载时的闪烁可能会给用户带来不好的体验，因此确保您真正需要避免服务器端加载。还要考虑使用 <ClientOnly> 与 fallback 插槽以呈现骨架加载器。

⚗️ 仅服务器端页面更加有用，因为它们使您能够在客户端导航中集成完全由服务器渲染的 HTML。当链接到这些页面时，在视口内预取它们 - 这样您将获得即时加载效果。

🤠 服务器组件

当您使用服务器组件时，现在可以在树的任何位置使用 nuxt-client 属性。

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

您可以从服务器组件中侦听@error事件，如果加载组件时出现任何问题，该事件将被触发。

最后，在项目或其任何层中具有仅限服务器的组件或仅限服务器页面时，现在智能启用了仅限服务器的组件。

服务器组件仍处于实验阶段，其API可能会更改，请在依赖于实施细节之前小心。

🔥 性能改进

我们已经推出了许多性能改进，包括仅更新更改的虚拟模板，使用一个“分层”预渲染缓存，当预渲染时回退到文件系统而不是将所有内容保留在内存中 - 还有很多其他例子。

📂 公共资产处理

我们已经重新实现了 Vite 的公共资产处理，这意味着您 public/ 目录或您的层目录中的公共资产现在完全由 Nuxt 解析，因此如果您添加了带有自定义前缀的 nitro.publicAssets 目录，则这些将起作用。

📦 块命名

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

您可以轻松配置此选项，以恢复到先前的行为。

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