---
title: "Nuxt 是如何工作的？"
description: "Nuxt 是一个极简但高度可定制的框架，用于构建 Web 应用。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/guide/going-further/internals"
---
# Nuxt 是如何工作的？

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

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

## Nuxt 接口

当你通过 [`nuxt dev`](https://nuxt.zhcndoc.com/docs/3.x/api/commands/dev) 在开发模式下启动 Nuxt，或使用 [`nuxt build`](https://nuxt.zhcndoc.com/docs/3.x/api/commands/build) 构建生产应用时，会创建一个通用上下文，在内部称为 `nuxt`。它包含与 `nuxt.config` 文件合并并规范化后的选项、一些内部状态，以及由 [unjs/hookable](https://github.com/unjs/hookable) 提供支持的强大[钩子系统](https://nuxt.zhcndoc.com/docs/3.x/api/advanced/hooks)，使不同组件能够相互通信。你可以将其视为 **Builder Core**。

此上下文可通过 [Nuxt Kit](https://nuxt.zhcndoc.com/docs/3.x/guide/going-further/kit) 组合式函数全局访问。因此，每个进程只允许运行一个 Nuxt 实例。

要扩展 Nuxt 接口并接入构建过程的不同阶段，我们可以使用 [Nuxt 模块](https://nuxt.zhcndoc.com/docs/3.x/guide/modules)。

更多细节请查看 [源码](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/core/nuxt.ts)。

## NuxtApp 接口

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

在 Nuxt 插件、`<script setup>` 和 Vue 组合式函数中，可以使用 [`useNuxtApp()`](https://nuxt.zhcndoc.com/docs/3.x/api/composables/use-nuxt-app) 组合式函数访问此上下文。在浏览器中可以全局使用，但在服务器上不行，以避免在不同用户之间共享上下文。

由于 [`useNuxtApp`](https://nuxt.zhcndoc.com/docs/3.x/api/composables/use-nuxt-app) 会在当前上下文不可用时抛出异常，如果你的组合式函数并非始终需要 `nuxtApp`，则可以改用 [`tryUseNuxtApp`](https://nuxt.zhcndoc.com/docs/3.x/api/composables/use-nuxt-app#tryusenuxtapp)，它会返回 `null`，而不是抛出异常。

要扩展 `nuxtApp` 接口、接入不同阶段或访问上下文，我们可以使用 [Nuxt 插件](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/plugins)。

有关此接口的更多信息，请查看 [Nuxt App](https://nuxt.zhcndoc.com/docs/3.x/api/composables/use-nuxt-app)。

`nuxtApp` 包含以下属性：

```ts
interface 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
}
```

更多细节请参见 [源码](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/nuxt.ts)。

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

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

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

`nuxt.config` 和 [Nuxt 模块](https://nuxt.zhcndoc.com/docs/3.x/guide/modules)可用于扩展构建时上下文，而 [Nuxt 插件](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/plugins)可用于扩展运行时。

在为生产环境构建应用时，`nuxt build` 会在 `.output` 目录中生成独立的构建产物，不依赖于 `nuxt.config` 和 [Nuxt 模块](https://nuxt.zhcndoc.com/docs/3.x/guide/modules)。


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.