Nuxt 是如何工作的?

Nuxt 是一个极简但高度可定制的框架,用于构建 Web 应用。

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

Nuxt 接口

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

这个上下文在全局范围内可用,可以配合 Nuxt Kit 组合式 API 使用。 因此,一个进程中只允许运行一个 Nuxt 实例。

为了扩展 Nuxt 接口并挂载到构建过程的不同阶段,我们可以使用 Nuxt 模块

更多细节请查看 源码

NuxtApp 接口

当在浏览器或服务器端渲染页面时,会创建一个共享上下文,称为 nuxtApp。 该上下文保存 Vue 实例、运行时钩子以及内部状态,比如用于 hydration 的 ssrContext 和 payload。 你可以将其视为运行时核心

这个上下文可以通过 useNuxtApp() 组合式 API 在 Nuxt 插件、<script setup> 和 Vue 组合式函数中访问。 全局使用在浏览器端是可行的,但服务器端不允许这样做,以避免不同用户之间共享上下文。

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

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

更多关于该接口的信息,请查看 Nuxt App

nuxtApp 包含以下属性:

const nuxtApp = {
  vueApp, // 全局 Vue 应用实例:https://vue.zhcndoc.com/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
}

更多细节请参见 源码

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

Nuxt 使用 Node.js 构建和打包项目,同时也具有运行时部分。

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

nuxt.configNuxt 模块 可用于扩展构建上下文,而 Nuxt 插件 则用于扩展运行时。

当构建生产应用时,nuxt build 会生成一个位于 .output 目录下的独立构建,该构建独立于 nuxt.configNuxt 模块