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 组合式函数定义了一个 "scope"（#23667），它允许在离开网站之前同步清理，使用 Vue 的 onScopeDispose 生命周期方法。

我们还支持在 Vue composition 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 */ }, {
  // 如果在负载中存在该键，将不会重新获取数据
  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 开心 ✨