运作方式 How Nuxt Works?

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 具有以下属性：

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。