---
title: "Nuxt 3.5"
description: "Nuxt 3.5.0 已发布，带来了 Vue 3.3、新的默认设置、交互式服务器组件、带类型的页面、环境配置等等功能。"
canonical_url: "https://nuxt.zhcndoc.com/blog/v3-5"
---
# Nuxt 3.5

> Nuxt 3.5.0 已发布，带来了 Vue 3.3、新的默认设置、交互式服务器组件、带类型的页面、环境配置等等功能。

## ⚡️ Vue 3.3 发布

Vue 3.3 已发布，带来了许多令人兴奋的功能，特别是类型支持方面的功能。

- 新的 `defineOptions` 宏
- 'generic' 组件
- 带类型的插槽和在 `defineProps` 中使用外部类型
- ... 还有更多

这也带来了一个显著的改进，即在导航嵌套页面之间获取数据时（[#20777](https://github.com/nuxt/nuxt/pull/20777)），感谢 [@antfu](https://github.com/antfu) 和 [@baiwusanyu-c](https://github.com/baiwusanyu-c)。

阅读 **[完整的发布公告](https://blog.vuejs.org/posts/vue-3-3)** 以了解更多详情。

### 🙌 Nitropack v2.4

我们一直在对 Nitro 进行大量改进，这些改进已经在 Nitro v2.4 中实现 - 你可能已经进行了这次升级，其中包含了许多错误修复、对 Cloudflare 的模块工作器格式更新、Vercel KV 支持等等。

一个注意事项：如果你正在部署到 Vercel 或 Netlify，并且希望从增量静态再生中受益，现在应该更新你的路由规则：

```diff
routeRules: {
--  '/blog/**': { swr: 3000 },
++  '/blog/**': { isr: 3000 },
}
```

阅读 **[完整的发布说明](https://github.com/unjs/nitro/releases/tag/v2.4.0)**。

### 💖 丰富的 JSON 数据载荷

**默认情况下启用丰富的 JSON 数据载荷序列化**（[#19205](https://github.com/nuxt/nuxt/pull/19205), [#20770](https://github.com/nuxt/nuxt/pull/20770)）。
这不仅更快，还允许将复杂对象序列化为从 Nuxt 服务器传递给客户端的载荷（以及为预渲染站点提取载荷数据时）。

这现在意味着**各种丰富的 JavaScript 类型被开箱即用支持**：正则表达式、日期、Map 和 Set，以及 BigInt，还有诸如 `ref`、`reactive`、`shallowRef` 和 `shallowReactive` 等 Vue 特定对象。

你可以在我们的测试套件中找到 [一个示例](https://github.com/nuxt/nuxt/blob/main/test/fixtures/basic/pages/json-payload.vue)。

所有这些得益于 [Rich-Harris/devalue#58](https://github.com/Rich-Harris/devalue/pull/58)。长期以来，Nuxt 一直在使用我们自己的 devalue 分支，因为无法序列化错误和其他非 POJO 对象，但现在我们已经回到了原始版本。

你甚至可以使用新的对象语法 Nuxt 插件注册自定义类型：

```ts [plugins/custom-payload-type.ts]
export default definePayloadPlugin(() => {
  definePayloadReducer('BlinkingText', data => data === '<original-blink>' && '_')
  definePayloadReviver('BlinkingText', () => '<revivified-blink>')
})
```

你可以在[这里](https://github.com/rich-harris/devalue#custom-types)阅读更多关于它的工作原理。

## 🛝 交互式服务器组件

这个功能应被视为高度实验性的，但感谢 @huang-julien 的杰出工作，我们现在支持通过 *slots* 在服务器组件中进行交互式内容的展示（[#20284](https://github.com/nuxt/nuxt/pull/20284)）。

你可以在 [#19772](https://github.com/nuxt/nuxt/issues/19772) 上关注服务器组件的路线图。

## ⏰ 环境配置

现在你可以在你的 `nuxt.config.ts` 中配置完全带类型的每个环境覆盖：

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  $production: {
    routeRules: {
      '/**': { isr: true }
    }
  },
  $development: {
    //
  }
})
```

如果你正在编写层，你还可以使用 `$meta` 键提供你或你的层的消费者可能使用的元数据。

阅读更多关于[每个环境覆盖](https://github.com/nuxt/nuxt/pull/20329)的内容。

## 💪 完全带类型的页面

通过与 [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) 的实验性集成，你可以在 Nuxt 应用中充分受益于带类型的路由 - 这得益于 [@posva](https://github.com/posva) 的杰出工作！

开箱即用地，这将使得 [`navigateTo`](https://nuxt.zhcndoc.com/docs/api/utils/navigate-to)、[`<NuxtLink>`](https://nuxt.zhcndoc.com/docs/api/components/nuxt-link)、`router.push()` 等具有类型支持。

你甚至可以通过使用 `const route = useRoute('route-name')`{lang="ts"} 在页面中获取带类型的参数。

直接在你的 `nuxt.config.ts` 中启用此功能：

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

## 🔎 'Bundler' 模块解析

现在 Nuxt 完全支持 [模块解析](https://www.typescriptlang.org/docs/handbook/module-resolution.html) 的 `bundler` 策略。

如果可能的话，我们建议采用这种策略。它对子路径导出提供了类型支持，例如，但与 `Node16` 解析相比，更准确地匹配了 Vite 和 Nuxt 等构建工具的行为。

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      compilerOptions: {
        moduleResolution: 'bundler'
      }
    }
  }
})
```

这样就启用了 TypeScript 的 'follow' Node 子路径导出的能力。例如，如果一个库有一个子路径导出 `mylib/path`，它被映射到 `mylib/dist/path.mjs`，那么对于此导出的类型可以从 `mylib/dist/path.d.ts` 中引入，而不需要库的作者创建 `mylib/path.d.ts`。

## ⚗️ 分离的服务器类型

我们计划通过为 [`~/server`](https://nuxt.zhcndoc.com/docs/guide/directory-structure/server) 目录生成单独的 `tsconfig.json` 来提高 IDE 中 "nitro" 部分和 "vue" 部分之间的清晰度（[#20559](https://github.com/nuxt/nuxt/pull/20559)）。

你可以通过添加一个额外的 `~/server/tsconfig.json` 文件来使用，内容如下：

```json
{
  "extends": "../.nuxt/tsconfig.server.json"
}
```

尽管目前这些值在类型检查（`nuxi typecheck`）时不会被考虑，但你的 IDE 应该会得到更好的类型提示。

## 💀 废弃

尽管我们没有为 Nuxt 2 中的 `build.extend` 钩子进行类型化或文档化，但我们一直在 webpack 构建器中调用它。我们现在明确将其标记为废弃，并将在未来的小版本中删除。

## ✅ 升级

像往常一样，我们建议运行：

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

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

## 📃 完整的变更日志

阅读完整的发布说明，请访问 <https://github.com/nuxt/nuxt/releases/tag/v3.5.0>


## Sitemap

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