Question

Nuxt 是一个用于构建 Web 应用程序的最小但高度可定制的框架。

Nuxt 是一个用于构建 Web 应用程序的最小但高度可定制的框架。 本指南可帮助您更好地了解 Nuxt 内部结构，以在 Nuxt 之上开发新的解决方案和模块集成。

Nuxt 界面

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

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

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

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

NuxtApp 界面

在浏览器或服务器上呈现页面时，将创建一个共享上下文，称为nuxtApp。
此上下文保留 vue 实例、运行时挂钩和内部状态，如 ssrContext 和用于水合作用的有效负载。
您可以将其视为 Runtime Core。

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

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

查看 Nuxt App 了解有关此接口的更多信息。

nuxtApp 具有以下属性：

js

const nuxtApp = {
  vueApp, // 全局 Vue 应用程序：https://vuejs.org/api/application.html#application-api

  versions, // 包含 Nuxt 和 Vue 版本的对象

  // 这些让你调用和添加运行时 NuxtApp 挂钩
  // https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/nuxt.ts#L18
  hooks,
  hook,
  callHook,

  // 只能在服务器端访问
  ssrContext: {
    url,
    req,
    res,
    runtimeConfig,
    noSSR,
  },

  // 这将被字符串化并从服务器传递到客户端
  payload: {
    serverRendered: true,
    data: {},
    state: {}
  }

  provide: (name: string, value: any) => void
}

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

运行时/构建 上下文

Nuxt 使用 Node.js 构建和捆绑项目，但也有运行时方面。

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

nuxt.config 和 Nuxt Modules 可用于扩展构建上下文，Nuxt 插件 可用于 延长运行时间。

在构建用于生产的应用程序时，nuxi build 将生成一个独立的构建

在 .output 目录中，独立于 nuxt.config 和 Nuxt modules。