Nuxt 如何工作？

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

Nuxt 接口

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

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

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

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

NuxtApp 接口

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

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

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

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

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

nuxtApp 具有以下属性

const nuxtApp = {
  vueApp, // the global Vue application: https://vuejs.ac.cn/api/application.html#application-api

  versions, // an object containing Nuxt and Vue versions

  // These let you call and add runtime NuxtApp hooks
  // https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/nuxt.ts#L18
  hooks,
  hook,
  callHook,

  // Only accessible on server-side
  ssrContext: {
    url,
    req,
    res,
    runtimeConfig,
    noSSR,
  },

  // This will be stringified and passed from server to client
  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 模块。