Nuxt 如何运作？

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

¥This guide helps you better understand Nuxt internals to develop new solutions and module integrations on top of Nuxt.

Nuxt 接口

¥The Nuxt Interface

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

¥When you start Nuxt in development mode with nuxi dev or building a production application with nuxi build, a common context will be created, referred to as nuxt internally. It holds normalized options merged with nuxt.config file, some internal state, and a powerful hooking system powered by unjs/hookable allowing different components to communicate with each other. You can think of it as Builder Core.

此上下文全局可用，可与 Nuxt 套件 可组合项一起使用。因此，每个进程只允许运行一个 Nuxt 实例。

¥This context is globally available to be used with Nuxt Kit composables. Therefore only one instance of Nuxt is allowed to run per process.

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

¥To extend the Nuxt interface and hook into different stages of the build process, we can use Nuxt Modules.

更多详情，包括执行顺序和并行性，请参阅 源代码。

¥For more details, check out the source code.

NuxtApp 接口

¥The NuxtApp Interface

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

¥When rendering a page in the browser or on the server, a shared context will be created, referred to as nuxtApp. This context keeps vue instance, runtime hooks, and internal states like ssrContext and payload for hydration. You can think of it as Runtime Core.

此上下文可以通过 Nuxt 插件、<script setup> 和 Vue 可组合项中的 useNuxtApp() 可组合项访问。如果可能，返回历史记录，与 相同。

¥This context can be accessed using useNuxtApp() composable within Nuxt plugins and <script setup> and vue composables. Global usage is possible for the browser but not on the server, to avoid sharing context between users.

由于 useNuxtApp 在上下文当前不可用时会抛出异常，如果你的可组合项并非始终需要 nuxtApp，则可以改用 tryUseNuxtApp，它将返回 null 而不是抛出异常。

¥Since useNuxtApp throws an exception if context is currently unavailable, if your composable does not always require nuxtApp, you can use tryUseNuxtApp instead, which will return null instead of throwing an exception.

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

¥To extend the nuxtApp interface and hook into different stages or access contexts, we can use Nuxt Plugins.

查看 Nuxt 应用 以获取有关此接口的更多信息。

¥Check Nuxt App for more information about this interface.

nuxtApp 具有以下属性：

¥nuxtApp has the following properties:

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
}

更多详情，包括执行顺序和并行性，请参阅 源代码。

¥For more details, check out the source code.

运行时上下文 vs. 构建上下文

¥Runtime Context vs. Build Context

Nuxt 使用 Node.js 构建和打包项目，但也提供运行时功能。

¥Nuxt builds and bundles project using Node.js but also has a runtime side.

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

¥While both areas can be extended, that runtime context is isolated from build-time. Therefore, they are not supposed to share state, code, or context other than runtime configuration!

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

¥nuxt.config and Nuxt Modules can be used to extend the build context, and Nuxt Plugins can be used to extend runtime.

在构建生产环境应用时，nuxi build 将在 .output 目录中生成一个独立的构建版本，独立于 nuxt.config 和 Nuxt 模块。

¥When building an application for production, nuxi build will generate a standalone build in the .output directory, independent of nuxt.config and Nuxt modules.