---
title: "Nuxt 3.8"
description: "Nuxt 3.8 已发布，带来了内建 DevTools、自动安装 Nuxt Image、新的应用程序清单，以及更多功能。"
canonical_url: "https://nuxt.zhcndoc.com/blog/v3-8"
---
# Nuxt 3.8

> Nuxt 3.8 已发布，带来了内建 DevTools、自动安装 Nuxt Image、新的应用程序清单，以及更多功能。

### 💻 CLI 改进

回顾一下，我们现在使用的是 [新的 Nuxt CLI](https://github.com/nuxt/cli)，其版本现在是分开版本的。

::tip
现在您可以使用 `nuxi module add <module-name>` 命令安装模块。
::

::note{icon="i-lucide-rocket"}
我们现在与 Vite websocket 共享同一个端口，这意味着在开发中对 Docker 容器的支持更好。
::

::read-more
```yaml [props]
to: https://github.com/nuxt/cli/releases/tag/v3.9.0
icon: i-simple-icons-github
color: gray
target: _blank
```
阅读 Nuxt CLI `v3.9.0` 发布说明。
::

### ✨ 内建 Nuxt DevTools

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

::read-more{to="https://nuxt.zhcndoc.com/blog/nuxt-devtools-v1-0" icon="i-simple-icons-github" color="gray"}
查看 Nuxt DevTools v1.0 的公告。
::

### 📸 Nuxt Image 自动安装

[`<NuxtImg>`](https://nuxt.zhcndoc.com/docs/api/components/nuxt-img) 和 [`<NuxtPicture>`](https://nuxt.zhcndoc.com/docs/api/components/nuxt-picture) 是一流的内建组件。

我们现在在第一次使用时自动安装 `@nuxt/image` 模块 ([#23717](https://github.com/nuxt/nuxt/pull/23717))。

::video{poster="https://res.cloudinary.com/nuxt/video/upload/v1697721767/nuxt3/nuxt-image-auto-install_uqkptq.jpg" controls .rounded.dark:border.dark:border-gray-700}
  :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697721767/nuxt3/nuxt-image-auto-install_uqkptq.webm" type="video/webm"}
  :::

  :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697721767/nuxt3/nuxt-image-auto-install_uqkptq.mp4" type="video/mp4"}
  :::

  :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697721767/nuxt3/nuxt-image-auto-install_uqkptq.ogg" type="video/ogg"}
  :::
::

::tip
如果您的站点中使用了图像，请使用 [`@nuxt/image`](https://image.nuxt.com) 模块，它可以对您的站点应用优化以提高性能。
::

### 📂 更深层次的布局扫描

::caution
这是一种行为改变，请谨慎处理。
::

我们现在支持在 [`~/layouts`](https://nuxt.zhcndoc.com/docs/guide/directory-structure/layouts) 目录下的子文件夹中扫描布局，方式与 [`~/components`](https://nuxt.zhcndoc.com/docs/guide/directory-structure/components) 目录中的方式相同。

| 文件                              | 布局名称              |
| ------------------------------- | ----------------- |
| ~/layouts/desktop/default.vue   | 'desktop-default' |
| ~/layouts/desktop-base/base.vue | 'desktop-base'    |
| ~/layouts/desktop/index.vue     | 'desktop'         |

::read-more{to="https://nuxt.zhcndoc.com/docs/guide/directory-structure/layouts#named-layout"}
了解更多关于**命名布局**的信息。
::

### 📊 应用程序清单

我们现在支持内建的应用程序清单（参见 [PR #21641](https://github.com/nuxt/nuxt/pull/21641)），它会在 `/_nuxt/builds/meta/<buildId>.json` 生成一个清单。

它使得加载负载仅限于**预渲染路由**成为可能，如果网站是通过 `nuxt generate` 生成的，可以防止在控制台中出现 404 错误。

它还可用于实现**客户端路由规则**。目前只支持 `redirect` 路由规则；在执行客户端导航时，它们现在会进行重定向。

::code-group
```ts [nuxt.config.ts]
export default defineNuxtConfig({
  routeRules: {
    '/about': { redirect: '/about-us' }
  }
})
```

```vue [pages/index.vue]
<template>
  <div>
    <!-- 会在客户端重定向到 /about-us -->
    <NuxtLink to="/about">关于</NuxtLink>
  </div>
</template>
```
::

::tip{icon="i-lucide-rocket"}
应用程序清单还可以实现后续的增强功能，例如通过检查 `/_nuxt/builds/latest.json` 来检测新部署。
::

::note
如果需要，您可以通过在 `nuxt.config.ts` 文件中将 `experimental.appManifest` 设置为 `false` 来**选择关闭此行为**。
::

### 🤝 作用域和上下文改进

我们现在为插件中执行的 Nuxt 组合式函数定义了一个 "scope"（[#23667](https://github.com/nuxt/nuxt/pull/23667)），它允许在离开网站之前同步清理，使用 Vue 的 [`onScopeDispose`](https://vue.zhcndoc.com/api/reactivity-advanced.html#onscopedispose) 生命周期方法。

::note
这应该修复了一些关于 cookies 的问题（[#23697](https://github.com/nuxt/nuxt/pull/23697)），并且还改进了内存管理，比如 Pinia 存储（[#23650](https://github.com/nuxt/nuxt/issues/23650)）。
::

::read-more{to="https://vue.zhcndoc.com/api/reactivity-advanced.html#effectscope" icon="i-simple-icons-vuedotjs" target="_blank"}
详细了解 Vue 效果作用域。
::

我们还支持在 *Vue composition API*（[#23526](https://github.com/nuxt/nuxt/pull/23526)）上使用[**原生异步上下文**](https://nodejs.org/api/async_context.html)。如果你不知道，我们在 Node 和 Bun 上支持原生异步上下文，可以通过 [`experimental.asyncContext`](https://nuxt.zhcndoc.com/docs/guide/going-further/experimental-features#asynccontext) 启用。

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

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  experimental: {
    asyncContext: true
  }
})
```

::note
一旦我们提供了跨运行时的支持，我们将默认启用该选项。
::

### 🔗 NuxtLink 默认设置

您可以使用 [`defineNuxtLink`](https://nuxt.zhcndoc.com/docs/api/components/nuxt-link#definenuxtlink-signature) 实用程序定义自己的 [`<NuxtLink>`](https://nuxt.zhcndoc.com/docs/api/components/nuxt-link) 组件。

今天，您可以直接在 `nuxt.config.ts` 文件中自定义内建 [`<NuxtLink>`](https://nuxt.zhcndoc.com/docs/api/components/nuxt-link) 的选项（[#23724](https://github.com/nuxt/nuxt/pull/23724)）。

这样您就可以强制在整个站点上实现尾部斜杠的行为，例如：

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        activeClass: 'nuxt-link-active',
        trailingSlash: 'append'
      }
    }
  }
})
```

### ⚡️ 数据获取改进

我们为 [`useAsyncData`](https://nuxt.zhcndoc.com/docs/api/composables/use-async-data) 和 [`useFetch`](https://nuxt.zhcndoc.com/docs/api/composables/use-fetch) 引入了两个非常重要的新功能：

1. 现在您可以设置 `deep: false`，以防止对这些组合式函数返回的 `data` 对象进行深度响应性操作（[#23600](https://github.com/nuxt/nuxt/pull/23600)）。如果您返回的是大型数组或对象，这将提高性能。当重新获取数据时，对象仍将更新；如果您更改了 `data` 内某个属性的值，这只不过不会触发响应性的效果。
2. 现在您可以使用 `getCachedData` 选项来处理这些组合式函数的自定义缓存（[#20747](https://github.com/nuxt/nuxt/pull/20747)）。

```vue [pages/index.vue]
<script setup>
const nuxtApp = useNuxtApp()
const { data } = await useAsyncData(() => { /* fetcher */ }, {
  // 如果在负载中存在该键，将不会重新获取数据
  getCachedData: key => nuxtApp.payload.static[key] ?? nuxtApp.payload.data[key]
})
</script>
```

::video-accordion{title="观看 Alexander Lichter 关于使用 getCachedData 进行客户端缓存的视频。" videoId="aQPR0xn-MMk"}
::

我们还支持在整个应用程序中为这些组合式函数配置一些默认值（[#23725](https://github.com/nuxt/nuxt/pull/20747)）：

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

### 🔢 层级改进

现在，我们更谨慎地加载层级插件（[#22889](https://github.com/nuxt/nuxt/pull/22889) 和 [#23148](https://github.com/nuxt/nuxt/pull/23148)）和中间件（[#22925](https://github.com/nuxt/nuxt/pull/22925) 和 [#23552](https://github.com/nuxt/nuxt/pull/23552)），按照层级的顺序加载，始终最后加载自己的插件和中间件。这意味着您可以依赖层级可能注入的实用工具。

可能是最重要的一个变化 - 如果您正在使用远程层级，现在我们会在您的 [`node_modules/`](https://nuxt.zhcndoc.com/docs/guide/directory-structure/node_modules) 文件夹中克隆这些层级（[#109](https://github.com/unjs/c12/pull/109)），因此层级可以使用您项目的依赖项。有关详细信息，请参阅 [`c12` 发布说明](https://github.com/unjs/c12/releases/tag/v1.5.1)。

::tip{icon="i-lucide-check-circle"}
我们还添加了一个测试套件，以覆盖这些层级解析的更改。
::

### 😴 夜间发布频道

每个提交到 Nuxt 的 `main` 分支都会自动发布为一个新版本，以便在发布之前更容易进行测试。我们将其从“边缘发布频道”重命名为“夜间发布频道”，以避免与 *边缘部署* 引起混淆。可能还会与 Microsoft Edge 引起混淆（尽管据我所知，没有人对此感到困惑！）

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

::read-more{to="https://nuxt.zhcndoc.com/docs/guide/going-further/nightly-release-channel#nightly-release-channel"}
了解更多关于**夜间发布频道**的信息。
::

### ⚗️ Nitro v2.7

Nitro v2.7 已发布，带来了许多改进和错误修复。

::tip{icon="i-lucide-rocket"}
🔥 最重要的一个是，我们现在在生产中使用 Node 18+ 原生支持的 `fetch` 来**减少 40% 的束大小**（[#1724](https://github.com/unjs/nitro/pull/1724)）。因此，如果可能，请将您的 Node 版本更新到至少 18。
::

::read-more
```yaml [props]
to: https://github.com/unjs/nitro/releases/tag/v2.7.0
icon: i-simple-icons-github
color: gray
target: _blank
```
查看 Nitro v2.7.0 发布说明。
::

### 💪 类型导入更改

::warning
这可能需要在您的项目中进行代码更改。
::

Vue 要求类型导入是显式的（这样 Vue 编译器才能正确优化和解析用于属性等的类型导入）。请参见[核心 Vue `tsconfig.json`](https://github.com/vuejs/tsconfig/blob/main/tsconfig.json#L30-L33)。

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

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

您可能还会遇到需要更新的 Nuxt 生态系统中的模块；请为这些模块提交问题。如果您是模块的作者，我也非常愿意帮助您解决任何问题。只需标记我，我会来查看的。

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

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      compilerOptions: {
        verbatimModuleSyntax: false
      }
    }
  }
})
```

但是，我们建议仅将其临时设置为否，因为 Vue 需要此选项以获得更好的结果。

## ✅ 升级

像往常一样，我们推荐运行以下命令进行升级：

```sh
npx nuxi upgrade
```

## 完整的发行说明

::read-more{to="https://github.com/nuxt/nuxt/releases/tag/v3.8.0" icon="i-simple-icons-github" color="gray"}
阅读 Nuxt `v3.8.0` 的完整发布说明。
::

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

**祝您使用 Nuxt 开心 ✨**


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.