Nuxt 3.8

💻 CLI 改进

提醒一下，我们现在正在使用新的 Nuxt CLI现在它已独立版本化。

✨ 内置 Nuxt DevTools

Nuxt DevTools v1.0.0 已发布，我们现在认为它已准备好作为 Nuxt 的直接依赖项发布。

📸 Nuxt Image 自动安装

<NuxtImg> 和 <NuxtPicture> 是第一类内置组件。

我们现在会在首次使用时自动安装 @nuxt/image (#23717).

📂 更深层次的布局扫描

我们现在支持在 ~/layouts 的子文件夹中扫描布局，与我们对 ~/components 的处理方式相同。

📊 应用清单

我们现在支持内置应用清单（参见PR #21641），它会在 /_nuxt/builds/meta/<buildId>.json 生成一个清单。

如果网站使用 nuxt generate 生成，它可以在控制台中加载 仅预渲染路由 的有效载荷，从而防止 404 错误。

它还支持 客户端路由规则。目前只支持 redirect 路由规则；它们现在在执行客户端导航时会重定向。

export default defineNuxtConfig({
  routeRules: {
    '/about': { redirect: '/about-us' }
  }
})

<template>
  <div>
    <!-- Will be redirected to /about-us on client-side -->
    <NuxtLink to="/about">About</NuxtLink>
  </div>
</template>

🤝 作用域和上下文改进

我们现在为在插件中执行的 Nuxt 可组合函数定义了一个“作用域”（#23667），这允许在使用 Vue 的 onScopeDispose 生命周期方法之前，同步执行清理操作，然后离开你的网站。onScopeDispose生命周期方法。

我们现在还支持原生异步上下文对于 Vue Composition API (#23526)。如果你不清楚，我们支持 Node 和 Bun 上的原生异步上下文，通过 experimental.asyncContext 启用。

如果你遇到 Nuxt 实例不可用 的问题，启用此选项可能会解决你的问题。

export default defineNuxtConfig({
  experimental: {
    asyncContext: true
  }
})

🔗 NuxtLink 默认值

你可以使用 defineNuxtLink 工具定义自己的 <NuxtLink> 组件。

今天，你可以在 nuxt.config.ts 文件中直接自定义内置 <NuxtLink> 的选项（#23724).

这可以让你在整个网站中强制执行尾部斜杠行为，例如

export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        activeClass: 'nuxt-link-active',
        trailingSlash: 'append'
      }
    }
  }
})

⚡️ 数据获取改进

我们为 useAsyncData 和 useFetch 提供了两个非常重要的新功能

1. 你现在可以设置 deep: false 来防止这些可组合函数返回的 data 对象上的深度响应式（#23600）。如果你返回大型数组或对象，这应该会提高性能。该对象在重新获取时仍会更新；它只是在您更改 data 深处的属性时不会触发响应式效果。
2. 你现在可以使用 getCachedData 选项来处理这些可组合函数的自定义缓存（#20747)

<script setup>
const nuxtApp = useNuxtApp()
const { data } = await useAsyncData(() => { /* fetcher */ }, {
  // this will not refetch if the key exists in the payload
  getCachedData: key => nuxtApp.payload.static[key] ?? nuxtApp.payload.data[key]
})
</script>

我们还支持在应用程序范围内配置这些可组合函数的一些默认值（#23725):

export default defineNuxtConfig({
  experimental: {
    defaults: {
      useAsyncData: {
        deep: false
      },
      useFetch: {
        retry: false,
        retryDelay: 100,
        retryStatusCodes: [500],
        timeout: 100
      }
    }
  }
})

🔢 层改进

我们现在更仔细地按照层的顺序加载层插件（#22889等等#23148）和中间件（#22925等等#23552），始终最后加载您自己的插件和中间件。这意味着您可以依赖层可能注入的工具。

以及可能最重要的变化之一——如果你正在使用远程层，我们现在会在你的 node_modules/ 文件夹中克隆这些层（#109），这样层就可以使用项目中的依赖项。有关完整详细信息，请参阅c12 发布说明。

😴 夜间发布渠道

Nuxt main 分支的每次提交都会自动部署到新版本，以便在发布前进行更简单的测试。我们已将其从“边缘发布渠道”重命名为“夜间发布渠道”，以避免与 边缘部署 混淆。可能也与 Microsoft Edge 有关（尽管我没听说有人对这个感到困惑！）

• nuxt3 现在是 nuxt-nightly
• nuxi-edge 现在是 nuxi-nightly
• @​nuxt/kit-edge 现在是 @​nuxt/kit-nightly
• ...以此类推。

⚗️ Nitro v2.7

Nitro v2.7 已发布，包含许多改进和错误修复。

💪 类型导入变更

Vue 要求类型导入必须是显式的（以便 Vue 编译器可以正确优化和解析 props 等的类型导入）。请参阅核心 Vue tsconfig.json.

因此，我们决定在 Nuxt 项目中默认开启 verbatimModuleSyntax，如果类型导入没有显式的 type 导入，它将抛出类型错误。要解决此问题，你需要更新你的导入。

- import { someFunction, SomeOptions } from 'some-library'
+ import { someFunction } from 'some-library'
+ import type { SomeOptions } from 'some-library'

你可能还会遇到 Nuxt 生态系统中的模块需要更新；请为这些模块提交一个 issue。如果你是模块作者，如果遇到任何问题，我也很乐意提供帮助。只需标记我，我会查看。

如果出于某种原因，您需要在项目中撤消此更改，您可以设置以下配置：

export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      compilerOptions: {
        verbatimModuleSyntax: false
      }
    }
  }
})

但是，我们建议只暂时这样做，因为 Vue 确实需要设置此选项才能获得最佳效果。

✅ 升级

像往常一样，我们建议您运行以下命令进行升级

npx nuxi upgrade

完整发布说明

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

祝您 Nuxting 愉快 ✨