Nuxt 如何運作？

本指南將協助您更深入了解 Nuxt 的內部運作，以便在 Nuxt 之上開發新的解決方案和模組整合。

Nuxt 介面

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

這個上下文可以在全域範圍內使用，並透過 Nuxt Kit 組合式函式存取。因此，每個程序只允許執行一個 Nuxt 實例。

為了擴展 Nuxt 介面並在建構過程的不同階段掛鉤，我們可以使用 Nuxt 模組。

如需更多詳細資訊，請查看 原始碼。

NuxtApp 介面

當在瀏覽器或伺服器上呈現頁面時，將會建立一個共享的上下文，稱為 nuxtApp。此上下文保留了 Vue 實例、執行階段鉤子和內部狀態，例如伺服器端渲染上下文和水合的酬載。您可以將其視為執行階段核心。

可以使用 Nuxt 外掛程式和 <script setup> 以及 Vue 組合式函式中的 useNuxtApp() 組合式函式來存取此上下文。可以在瀏覽器中全域使用，但不能在伺服器上使用，以避免在使用者之間共享上下文。

由於如果目前無法使用上下文，useNuxtApp 將會擲出例外，如果您的組合式函式並非總是需要 nuxtApp，則可以使用 tryUseNuxtApp 來替代，它將會傳回 null 而不是擲出例外。

為了擴展 nuxtApp 介面並掛鉤到不同的階段或存取上下文，我們可以使用 Nuxt 外掛程式。

如需有關此介面的更多資訊，請查看 Nuxt App。

nuxtApp 具有下列屬性

const nuxtApp = {
  vueApp, // the global Vue application: https://vuejs.org/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 外掛程式 可以用於擴展執行階段。

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