Nuxt 是如何工作的？

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

Nuxt 接口

当你用 nuxt dev 启动开发模式，或用 nuxt build 构建生产应用时，会创建一个通用的上下文，在内部被称为 nuxt。它包含了与 nuxt.config 文件合并后的规范化选项、一些内部状态，以及一个由 unjs/hookable 驱动的强大钩子系统，允许不同组件彼此通信。你可以把它视为构建核心（Builder Core）。

这个上下文全局可用，可与 Nuxt Kit 组合式函数一起使用。因此每个进程只允许运行一个 Nuxt 实例。

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

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

NuxtApp 接口

在浏览器或服务器上渲染页面时，会创建一个共享上下文，被称为 nuxtApp。这个上下文保存了 Vue 实例、运行时钩子，以及用于水合的 ssrContext 和 payload 等内部状态。你可以把它视为运行时核心（Runtime Core）。

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

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

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

关于此接口的更多信息，请查看 Nuxt App。

nuxtApp 拥有以下属性：

interface 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 插件 可用于扩展运行时。

当为生产构建应用时，nuxt build 会在 .output 目录中生成一个独立的构建产物，独立于 nuxt.config 和 Nuxt 模块。