通过 100+ 条技巧学习 Nuxt!

服务器引擎

Nuxt 由新的服务器引擎驱动:Nitro。

在构建 Nuxt 3 时,我们创建了一个新的服务器引擎:Nitro

它附带了许多功能

  • 对 Node.js、浏览器、服务工作者等跨平台支持。
  • 开箱即用的无服务器支持。
  • API 路由支持。
  • 自动代码分割和异步加载块。
  • 静态 + 无服务器站点的混合模式。
  • 具有热模块重载的开发服务器。

API 层

服务器 API 端点中间件 由 Nitro 添加,它在内部使用 h3

主要功能包括

  • 处理程序可以直接返回对象/数组,以实现自动处理的 JSON 响应
  • 处理程序可以返回 promise,它将被等待(也支持 res.end()next()
  • 用于正文解析、cookie 处理、重定向、标头等的辅助函数

有关更多信息,请查看 h3 文档

server/ 目录中了解有关 API 层的更多信息。

直接 API 调用

Nitro 允许通过全局可用的 $fetch 辅助函数“直接”调用路由。如果在浏览器上运行,这将对服务器进行 API 调用,但如果在服务器上运行,将直接调用相关函数,从而节省额外的 API 调用

$fetch API 使用 ofetch,其主要功能包括

  • 自动解析 JSON 响应(如果需要,可以访问原始响应)
  • 请求正文和参数会自动处理,并带有正确的 Content-Type 标头

有关 $fetch 功能的更多信息,请查看 ofetch

类型化的 API 路由

当使用 API 路由(或中间件)时,只要您返回一个值而不是使用 res.end() 发送响应,Nitro 将为这些路由生成类型。

当使用 $fetch()useFetch() 时,您可以访问这些类型。

独立服务器

Nitro 生成一个独立于 node_modules 的独立服务器 dist。

Nuxt 2 中的服务器不是独立的,需要 Nuxt 核心的一部分参与才能运行 nuxt start(使用 nuxt-startnuxt 发行版)或自定义的编程用法,这种用法很脆弱,容易损坏,不适合无服务器和服务工作者环境。

Nuxt 在运行 nuxt build 时,会将此 dist 生成到 .output 目录中。

该输出包含在任何环境(包括实验性浏览器服务工作者!)中运行您的 Nuxt 服务器并提供您的静态文件的运行时代码,使其成为 JAMstack 的真正混合框架。此外,Nuxt 实现了一个本机存储层,支持多源驱动程序和本地资源。

在 GitHub 上阅读有关 Nitro 引擎的更多信息。