Nuxt 是如何工作的?
本指南帮助您更好地理解 Nuxt 的内部结构,以便在 Nuxt 之上开发新解决方案和模块集成。
Nuxt 接口
当您使用 nuxi dev
在开发模式中启动 Nuxt,或使用 nuxi build
构建生产应用时,
将创建一个公共上下文,内部称为 nuxt
。它保存与 nuxt.config
文件合并的标准化选项,
一些内部状态,以及一个强大的 钩子系统,由 unjs/hookable 驱动,
允许不同组件之间进行通信。您可以将其视为 构建核心。
此上下文可以在 Nuxt Kit 组合式 API 中全局使用。 因此每个进程只允许运行一个 Nuxt 实例。
要扩展 Nuxt 接口并钩入构建过程的不同阶段,我们可以使用 Nuxt 模块。
有关更多详细信息,请查看 源代码。
NuxtApp 接口
在浏览器或服务器上渲染页面时,将创建一个共享上下文,称为 nuxtApp
。
此上下文保留 vue 实例、运行时钩子以及如 ssrContext 和用于水合作用的负载等内部状态。
您可以将其视为 运行时核心。
此上下文可以通过 useNuxtApp()
组合式 API 在 Nuxt 插件和 <script setup>
及 vue 组合式 API 中访问。
在浏览器中可以全局使用,但在服务器上不可以,以避免用户之间共享上下文。
由于 useNuxtApp
如果上下文当前不可用将引发异常,如果您的组合式 API 并不总是需要 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
}
有关更多详细信息,请查看 源代码。
运行时上下文与构建上下文
Nuxt 使用 Node.js 构建和打包项目,但也有运行时方面。
虽然这两个领域都可以扩展,但运行时上下文与构建时是隔离的。因此,除运行时配置外,不应共享状态、代码或上下文!
nuxt.config
和 Nuxt 模块 可用于扩展构建上下文,而 Nuxt 插件 可用于扩展运行时。
构建生产应用时,nuxi build
将生成一个独立的构建在 .output
目录中,与 nuxt.config
和 Nuxt 模块 独立。