Nuxt 是如何工作的？

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

Nuxt 接口

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

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

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

有关更多详细信息，请查看 源代码。

NuxtApp 接口

在浏览器或服务器上渲染页面时，将创建一个共享上下文，称为 nuxtApp。 此上下文保留 vue 实例、运行时钩子以及如 ssrContext 和用于水合作用的负载等内部状态。 您可以将其视为 运行时核心。

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

由于 useNuxtApp 如果上下文当前不可用将引发异常，如果您的组合式 API 并不总是需要 nuxtApp，您可以使用 tryUseNuxtApp，它在不可用时将返回 null，而不是引发异常。

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

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

nuxtApp 具有以下属性：

const nuxtApp = {
  vueApp, // 全局 Vue 应用程序: https://vue.zhcndoc.com/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 模块 独立。