透過 100+ 個技巧的集合來學習 Nuxt!

伺服器引擎

Nuxt 由新的伺服器引擎 Nitro 驅動。

在建構 Nuxt 3 時,我們建立了一個新的伺服器引擎:Nitro

它隨附許多功能

  • 跨平台支援 Node.js、瀏覽器、服務工作人員等等。
  • 開箱即用的無伺服器支援。
  • API 路由支援。
  • 自動程式碼分割和非同步載入的區塊。
  • 靜態 + 無伺服器網站的混合模式。
  • 具有熱模組重載的開發伺服器。

API 層

伺服器 API 端點中介層 由 Nitro 新增,其內部使用 h3

主要功能包括

  • 處理程序可以直接傳回物件/陣列,以自動處理 JSON 回應
  • 處理程序可以傳回 promises,這些 promises 將會被等待(也支援 res.end()next()
  • 用於主體解析、cookie 處理、重新導向、標頭等的輔助函式

查看 h3 文件以取得更多資訊。

深入了解 server/ 目錄中的 API 層。

直接 API 呼叫

Nitro 允許透過全域可用的 $fetch 輔助程式「直接」呼叫路由。如果在瀏覽器上執行,這將對伺服器進行 API 呼叫,但如果在伺服器上執行,則會直接呼叫相關函式,從而節省額外的 API 呼叫

$fetch API 正在使用 ofetch,主要功能包括

  • 自動解析 JSON 回應(如果需要,可以存取原始回應)
  • 請求主體和參數會自動處理,並具有正確的 Content-Type 標頭

如需有關 $fetch 功能的更多資訊,請查看 ofetch

類型化的 API 路由

當使用 API 路由(或中介層)時,只要您傳回值而不是使用 res.end() 來傳送回應,Nitro 就會為這些路由產生類型定義。

當使用 $fetch()useFetch() 時,您可以存取這些類型。

獨立伺服器

Nitro 產生獨立的伺服器發行版,它獨立於 node_modules

Nuxt 2 中的伺服器不是獨立的,需要透過執行 nuxt start(使用 nuxt-startnuxt 發行版)或自訂程式化用法來參與部分 Nuxt 核心,這很脆弱且容易損壞,不適用於無伺服器和服務工作人員環境。

當在 .output 目錄中執行 nuxt build 時,Nuxt 會產生此發行版。

輸出包含執行階段程式碼,可在任何環境(包括實驗性瀏覽器服務工作人員!)中執行您的 Nuxt 伺服器並提供您的靜態檔案,使其成為適用於 JAMstack 的真正混合框架。此外,Nuxt 實作了原生儲存層,支援多來源驅動程式和本機資產。

在 GitHub 上閱讀更多關於 Nitro 引擎的資訊。