Nuxt 是如何工作的？

Nuxt 是一个简洁但高度可定制的框架，用于构建 Web 应用程序。

本指南将帮助你更好地理解 Nuxt 的内部工作原理，以便在 Nuxt 的基础上开发新的解决方案和模块集成。

Nuxt 接口

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

这个上下文可以在 Nuxt Kit 组合式 API 中全局使用。 因此，每个进程只允许运行一个 Nuxt 实例。

为了扩展 Nuxt 接口并在构建过程的不同阶段进行钩子操作，我们可以使用 Nuxt 模块。

更多细节，请查看源代码。

NuxtApp 接口

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

可以在 Nuxt 插件、<script setup> 和 Vue 组合式 API 中使用 useNuxtApp() 组合式 API 来访问这个上下文。 在浏览器中可以全局使用，但在服务器上不可以，以避免在用户之间共享上下文。

为了扩展 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
}

更多细节，请查看源代码。

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

Nuxt 使用 Node.js 构建和捆绑项目，但也有一个运行时方面。

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

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

在构建应用程序时，nuxi build 将在 .output 目录中生成一个独立的构建，与 nuxt.config 和 Nuxt 模块 无关。