Nuxt 是如何工作的？

本指南帮助您更好地理解 Nuxt 的内部机制，以便在 Nuxt 之上开发新的解决方案和模块集成。

Nuxt 接口

当您使用 nuxt dev 启动 Nuxt 的开发模式或使用 nuxt build 构建生产应用程序时， 会创建一个公共上下文，在内部称为 nuxt。它包含与 nuxt.config 文件合并的规范化选项、 一些内部状态，以及一个强大的 钩子系统，由 unjs/hookable 提供支持， 允许不同组件之间进行通信。您可以将其视为 构建核心。

此上下文可以通过 Nuxt Kit 的可组合函数全局访问。 因此，每个进程只允许运行一个 Nuxt 实例。

要扩展 Nuxt 接口并挂钩到构建过程的不同阶段，我们可以使用 Nuxt 模块。

更多详情，请查看 源代码。

NuxtApp 接口

在浏览器或服务器上渲染页面时，会创建一个共享上下文，称为 nuxtApp。 此上下文保存了 Vue 实例、运行时钩子以及内部状态，例如用于 hydration 的 ssrContext 和 payload。 您可以将其视为 运行时核心。

此上下文可以通过 useNuxtApp() 可组合函数在 Nuxt 插件、<script setup> 和 Vue 可组合函数中访问。 在浏览器中可以全局使用，但在服务器上不行，以避免用户之间的上下文共享。

由于 useNuxtApp 在上下文不可用时会抛出异常，如果您的可组合函数并非总是需要 nuxtApp，您可以使用 tryUseNuxtApp，它将返回 null 而不是抛出异常。

要扩展 nuxtApp 接口并挂钩到不同阶段或访问上下文，我们可以使用 Nuxt 插件。

查看 Nuxt App 以获取更多关于此接口的信息。

nuxtApp 具有以下属性：

const nuxtApp = {
  vueApp, // 全局 Vue 应用程序：https://vuejs.org/api/application.html#application-api

  versions, // 包含 Nuxt 和 Vue 版本的对象

  // 这些允许您调用和添加运行时 NuxtApp 钩子
  // https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/nuxt.ts#L18
  hooks,
  hook,
  callHook,

  // 仅在服务器端可访问
  ssrContext: {
    url,
    req,
    res,
    runtimeConfig,
    noSSR,
  },

  // 这将被序列化为字符串并从服务器传递到客户端
  payload: {
    serverRendered: true,
    data: {},
    state: {}
  }

  provide: (name: string, value: any) => void
}

更多详情，请查看 源代码。

运行时上下文与构建上下文

Nuxt 使用 Node.js 构建和打包项目，但也具有运行时部分。

虽然这两个领域都可以扩展，但运行时上下文与构建时是隔离的。因此，它们不应该共享状态、代码或上下文，除非是运行时配置！

nuxt.config 和 Nuxt 模块 可用于扩展构建上下文，而 Nuxt 插件 可用于扩展运行时。

在为生产环境构建应用程序时，nuxt build 将在 .output 目录中生成一个独立的构建，独立于 nuxt.config 和 Nuxt 模块。