How Nuxt Works?

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

Nuxt 接口

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

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

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

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

NuxtApp 接口

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

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

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

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

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

nuxtApp 具有以下属性：

const nuxtApp = {
  vueApp, // the global Vue application: https://vuejs.org/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 模块。