Nuxt 如何工作？

本指南可幫助您更好地理解 Nuxt 內部原理，以便在 Nuxt 的基礎上開發新的解決方案和模組整合。

Nuxt 介面

當您使用 nuxt dev 在開發模式下啟動 Nuxt，或者使用 nuxt build 構建生產應用程式時，都會建立一個通用上下文，在內部稱為 nuxt。它包含與 nuxt.config 檔案合併的標準化選項、一些內部狀態，以及一個由unjs/hookable提供支援的強大鉤子系統，允許不同的元件相互通訊。您可以將其視為 構建器核心。

此上下文可全域性使用，與 Nuxt Kit 可組合項一起使用。因此，每個程序只允許執行一個 Nuxt 例項。

要擴充套件 Nuxt 介面並鉤入構建過程的不同階段，我們可以使用 Nuxt 模組。

有關更多詳細資訊，請檢視原始碼.

NuxtApp 介面

當在瀏覽器或伺服器上渲染頁面時，將建立一個共享上下文，稱為 nuxtApp。此上下文儲存 Vue 例項、執行時鉤子和內部狀態，例如用於水合的 ssrContext 和 payload。您可以將其視為 執行時核心。

在 Nuxt 外掛、<script setup> 和 Vue 可組合項中，可以使用 useNuxtApp() 可組合項訪問此上下文。全域性使用在瀏覽器中是可能的，但在伺服器上不行，以避免在使用者之間共享上下文。

由於如果上下文當前不可用，useNuxtApp 會丟擲異常，如果您的可組合項並非總是需要 nuxtApp，您可以改用 tryUseNuxtApp，它將返回 null 而不是丟擲異常。

要擴充套件 nuxtApp 介面並鉤入不同階段或訪問上下文，我們可以使用 Nuxt 外掛。

有關此介面的更多資訊，請檢視 Nuxt 應用。

nuxtApp 具有以下屬性

interface NuxtApp {
  vueApp // the global Vue application: https://vuejs.tw/api/application.html#application-api

  versions // an object containing Nuxt and Vue versions

  // These let you call and add runtime NuxtApp hooks
  // https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/nuxt.ts#L18
  hooks
  hook
  callHook

  // Only accessible on server-side
  ssrContext: {
    url
    req
    res
    runtimeConfig
    noSSR
  }

  // This will be stringified and passed from server to client
  payload: {
    serverRendered: true
    data: {}
    state: {}
  }

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

有關更多詳細資訊，請檢視原始碼.

執行時上下文 vs. 構建上下文

Nuxt 使用 Node.js 構建和捆綁專案，但也有一個執行時部分。

雖然這兩個領域都可以擴充套件，但執行時上下文與構建時是隔離的。因此，除了執行時配置之外，它們不應該共享狀態、程式碼或上下文！

nuxt.config 和 Nuxt 模組可用於擴充套件構建上下文，而 Nuxt 外掛可用於擴充套件執行時。

在構建生產應用程式時，nuxt build 將在 .output 目錄中生成一個獨立構建，獨立於 nuxt.config 和 Nuxt 模組。