---
title: "Nuxt 3.6"
description: "Nuxt 3.6 已发布，带来了性能改进、完全静态的服务器组件、更好的样式内联、静态预设、增强的类型安全性等等。"
canonical_url: "https://nuxt.zhcndoc.com/blog/v3-6"
---
# Nuxt 3.6

> Nuxt 3.6 已发布，带来了性能改进、完全静态的服务器组件、更好的样式内联、静态预设、增强的类型安全性等等。

## <img style="display:inline" src="https://nuxt.zhcndoc.com/assets/design-kit/icon-green.svg" width="36" height="36" alt="SPA loading indicator" valign="center">  SPA 加载指示器

如果你的网站使用了 `ssr: false` 或者在某些页面禁用了服务器渲染，你可能对新的[内置 SPA 加载指示器](https://github.com/nuxt/nuxt/pull/21640)特别感兴趣。

现在你可以在 `~/app/spa-loading-template.html` 中放置一个 HTML 文件，其中包含你想用来渲染加载屏幕的 HTML，直到你的应用在这些页面上注入完成。

::note
在 Nuxt v4（或使用 `compatibilityMode: 4`）中，此路径现在是 `~/spa-loading-template.html`。
::

👉 **默认情况下会渲染一个带动画的 Nuxt 图标**。你可以通过在你的 Nuxt 配置文件中设置 `spaLoadingTemplate: false` 来完全禁用该指示器。

## ⚡️ 性能改进

在你的应用注入完成时，首先会运行你的插件，所以现在我们对你的插件进行了[构建时的优化](https://github.com/nuxt/nuxt/pull/21611)，这意味着它们不需要在运行时进行归一化或重新排序。

我们还将错误组件的 JS 包含在你的主入口文件中，这意味着如果用户没有连接时发生错误，你仍然可以使用你的 `~/error.vue` 进行处理。（这也应该减少了打包的总大小。）

👉 与 Nuxt 3.5.3 相比，最小客户端包的体积减少了约 0.7kB。让我们继续保持这个趋势！

## 🔥 完全静态的服务器组件

以前我们已经可以在静态页面上使用服务器组件，但它们会增加应用的载荷大小。现在这不再是问题了。我们现在将[渲染后的服务器组件存储为单独的文件，并在导航之前进行预加载](https://github.com/nuxt/nuxt/pull/21461)。

👉 **这依赖于新的、更丰富的 JSON 载荷格式**，所以请确保没有通过将 `experimental.renderJsonPayloads` 设置为 false 来禁用它。

## 🎨 更好的样式内联

如果你密切监控你的指标并且没有关闭 `experimental.inlineSSRStyles`，你应该会看到更多的 CSS 内联到你的页面中，并且外部 CSS 文件将显著减少。现在我们在[去重全局 CSS](https://github.com/nuxt/nuxt/pull/21573)方面做得更出色，尤其是由 tailwind 或 unocss 等库添加的 CSS。

## 🎬 动画控制

为了给你更精细的控制页面/布局组件，例如使用 GSAP 或其他库创建自定义过渡效果，我们现在允许你在 `<NuxtPage>` 上设置[`pageRef`](https://github.com/nuxt/nuxt/pull/19403)，以及在 `<NuxtLayout>` 上设置[`layoutRef`](https://github.com/nuxt/nuxt/pull/19465)。这些将会传递给底层的 DOM 元素。

## ✨ 自动检测 'static' 预设

到目前为止，运行 `nuxt generate` 在每次部署提供程序上都会产生相同的输出，但是通过 Nuxt 3.6，我们现在自动启用了[静态提供程序预设](https://github.com/nuxt/nuxt/pull/21655)。这意味着如果你部署一个静态构建（使用 `nuxt generate` 生成）到一个受支持的提供程序（目前支持 vercel 和 netlify，很快还会支持 cloudflare 和 github pages），我们将为该提供程序预渲染你的页面，以提供对该提供程序的特殊支持。

这意味着我们可以配置不需要服务器函数的任何路由规则（重定向/标头等）。因此，当部署一个不需要运行时服务器端渲染的站点时，你将获得两全其美的效果。它还解除了在 Vercel 上使用 [Nuxt Image](https://github.com/nuxt/image) 的限制（未来还有更多与提供程序的自动集成的潜力）。

## 💪 增加类型安全性

如果你使用了我们在 Nuxt 3.5 中提供的新的 `~/server/tsconfig.json` 并从服务器目录中导入了 `#imports`，我们现在对服务器特定的 `#imports` 和扩展提供更好的支持。在 Nitro 中，当从服务器目录中的 `#imports` 导入时，你将获得正确的导入位置的 IDE 自动补全，不会看到不可用于服务器路由的 Vue 自动导入，如 `useFetch`。

现在，你还可以为[Nitro 运行时钩子提供类型支持](https://github.com/nuxt/nuxt/pull/21666)。

最后，我们[移除了更多对象默认为 `any` 类型的位置](https://github.com/nuxt/nuxt/pull/21700)。这应该在一些未指定类型回退为任意类型的 Nuxt 中的地方改善了类型安全性：

- `RuntimeConfig`
- `PageMeta`
- `NuxtApp['payload']`（从 `NuxtPayload` 接口中现在可以访问）
- `ModuleMeta`

如果对你产生了影响，你可以了解更多关于如何[更新你的代码](https://github.com/nuxt/nuxt/pull/21700)的信息。

## ⚗️ 内置 Nitro 2.5

此版本附带了新的 Nitro 2.5，其中有一系列令人兴奋的改进，值得一看。了解更多详情，请参阅[发行说明](https://github.com/unjs/nitro/releases/tag/v2.5.0)。

特别值得注意的是流媒体的实验性支持，这也是 Nuxt 自身的[一些更改](https://github.com/nuxt/nuxt/pull/21665)所启用的。

## 🛠️ 模块作者的新工具

该版本提供了一些对模块作者的实用工具，用于轻松[添加类型模板](https://github.com/nuxt/nuxt/pull/21331)和[断言与给定的模块版本兼容性](https://github.com/nuxt/nuxt/pull/21246)。

此外，该版本最终将解锁新的 `nuxt/module-builder` 模式，这应该改善模块作者的类型支持。如果你是模块作者，你可以考虑按照[这些迁移步骤](https://github.com/nuxt/starter/pull/392)在未来的几天中尝试它。

## ✅ 升级

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

```sh
npx nuxi upgrade --force
```

这将刷新你的锁文件，并确保你拉取 Nuxt 依赖其他依赖项的更新，特别是在 unjs 生态系统中。

## 📃 完整的更改日志

在 <https://github.com/nuxt/nuxt/releases/tag/v3.6.0> 上阅读完整的发布说明。


## Sitemap

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