Nuxt 如何工作？

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

Nuxt 接口

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

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

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

更多详情，请查看源代码.

NuxtApp 接口

在浏览器或服务器上渲染页面时，会创建一个共享上下文，称为 nuxtApp。此上下文包含 Vue 实例、运行时钩子以及 ssrContext 和 payload 等用于水合 (hydration) 的内部状态。您可以将其视为 **运行时核心 (Runtime Core)**。

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

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

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

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

nuxtApp 具有以下属性

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

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