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' }
  }
})

🤝 范围和上下文改进

我们现在为在插件中执行的 Nuxt 可组合项定义了“范围”（#23667），这允许在离开网站之前运行同步清理，使用 Vue onScopeDispose 生命周期方法。

我们现在还支持 **原生异步上下文** 用于 *Vue 组合式 API* (#23526)。如果您不知道，我们在 Node 和 Bun 上支持原生异步上下文，并通过 experimental.asyncContext 启用。

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

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

🔗 NuxtLink 默认值

您可以使用 defineNuxtLink 实用程序定义您自己的 <NuxtLink> 组件。

现在，您可以直接在 nuxt.config 文件中自定义内置 <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 编译器可以正确优化和解析道具等的类型导入）。请参阅 核心 Vue tsconfig.json。

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

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

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

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

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

但是，我们建议您仅临时执行此操作，因为 Vue 确实需要设置此选项才能获得最佳效果。

✅ 升级

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

npx nuxi upgrade

完整发布说明

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

祝您 Nuxt 开发愉快 ✨