Nuxt 如何工作？

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

The Nuxt Interface

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

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

我们可以使用 Nuxt 模块 来扩展 Nuxt 接口并在构建流程的不同阶段挂载钩子。

更多细节请查看源码。

The NuxtApp Interface

在浏览器或服务器渲染页面时，会创建一个共享上下文，称为 nuxtApp。 该上下文保存 vue 实例、运行时钩子以及诸如 ssrContext 和用于 hydration 的 payload 等内部状态。 你可以把它看作是 运行时核心（Runtime Core）。

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

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

我们可以使用 Nuxt 插件 来扩展 nuxtApp 接口并在不同阶段挂载或访问上下文。

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

nuxtApp 具有以下属性：

interface NuxtApp {
  vueApp // the global Vue application: https://vue.zhcndoc.com/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
}

更多细节请查看源码。

Runtime Context vs. Build Context

Nuxt 使用 Node.js 来构建并打包项目，但也具有运行时一面。

虽然两者都可以被扩展，但运行时上下文与构建时是隔离的。因此，除运行时配置之外，它们不应共享状态、代码或上下文！

可以使用 nuxt.config 和 Nuxt 模块 来扩展构建上下文，使用 Nuxt 插件 来扩展运行时。

当为生产构建应用时，nuxt build 会在 .output 目录下生成一个独立的构建，该构建与 nuxt.config 和 Nuxt 模块 无关。