完全靜態化

內容提要

1. 將 nuxt 升級到 2.14.0
2. 在你的 nuxt.config.js 中設定 target: 'static'
3. 執行 nuxt generate
4. 就是這樣 ✨

額外提示：你可以執行 nuxt start 來執行本地伺服器，提供你生成的靜態應用程式。

注意：在此影片中，我們使用的是 nuxt export，該命令已棄用，取而代之的是 nuxt generate。

歷史

Nuxt 自v0.3.2（2016年11月）以來就擁有使用 nuxt generate 的靜態生成功能，從那時起我們以多種方式改進了它，但從未實現完全靜態生成。今天，我很高興地宣佈，Nuxt 2.13 現在可以實現完全靜態匯出。

當前問題

nuxt generate 主要用於預渲染，當你在客戶端導航時，asyncData 和 fetch 會被呼叫，向你的 API 發出請求。許多使用者要求支援“完全靜態”模式，這意味著在導航時不再呼叫這兩個鉤子，因為下一頁已經預渲染了。

此外，開發體驗不佳

• 你可以在 SSR 上訪問 req 或 res，但在執行 nuxt generate 時無法訪問
• process.static 僅在執行 nuxt generate 時為 true，這使得為靜態生成開發 Nuxt 模組或外掛變得緩慢
• 你必須指定所有動態路由在 generate.routes 中，這使得它更難，因為你無法在那裡訪問 Nuxt 模組。
• 你無法測試SPA 回退在開發中，回退是你 Nuxt 應用程式的客戶端版本，當遇到 404 頁面時載入
• nuxt generate 預設執行 nuxt build，如果你的內容只發生變化，則生成網站的速度會變慢

請注意，以前可以使用nuxt-payload-extractor模組實現完全靜態支援，但使用起來更繁瑣且存在限制。

新配置選項：target

為了改善使用者體驗並告訴 Nuxt 你希望將應用程式匯出到靜態託管，我們在你的 nuxt.config.js 中引入了一個 target 選項。

<script setup>
  import { ref, computed } from '#imports'

  const count = ref(1)
  const double = computed(() => count.value * 2)
</script>

使用靜態目標執行 nuxt dev 將改善開發體驗

• 從上下文中刪除 req 和 res
• 在 404、錯誤和重定向時回退到客戶端渲染（見SPA 回退)
• $route.query 在伺服器端渲染時將始終等於 {}
• process.static 為 true

我們還暴露了 process.target，供模組作者根據使用者目標新增邏輯。

更智慧的 nuxt generate

現在，使用 v2.14.0，你可以使用 nuxt generate，它會智慧地知道是否需要構建。

極速靜態應用程式

使用 target: 'static' 執行 nuxt generate 將預渲染所有頁面為 HTML 並儲存一個 payload 檔案，以便在客戶端導航時模擬 asyncData 和 fetch，這意味著在客戶端導航時，不再對你的 API 進行 HTTP 呼叫。透過將頁面 payload 提取到 js 檔案，它還減少了 HTML 大小，並預載入它（從在頭部）以獲得最佳效能。

我們還改進了在完全靜態模式下的智慧預取，它也將獲取 payloads，使導航瞬間完成 👀

整合爬蟲

最重要的是，它內部還帶有一個爬蟲，可以檢測所有相對連結並生成它們。

如果你想排除一些路由，請使用generate.exclude。你可以繼續使用generate.routes來新增爬蟲無法檢測到的額外路由。

要停用爬蟲，請在你的 nuxt.config.js 中設定 generate.crawler: false

更快的重新部署

透過分離 nuxt build 和 nuxt export，我們開啟了一系列新的改進：僅當內容發生變化時才預渲染頁面，這意味著：沒有 webpack 構建 → 更快的重新部署。

更智慧的 nuxt start

一旦你將 Nuxt 應用程式靜態生成到 dist/ 中，使用 nuxt start 啟動生產 HTTP 伺服器並提供你的靜態應用程式，支援SPA 回退.

此命令非常適合在推送到你喜歡的靜態託管服務提供商之前本地測試你的靜態應用程式。

預覽模式

我們開箱即用地支援即時預覽，以持續呼叫你的 API。

export default async function ({ query, enablePreview }) {
  if (query.preview) {
    enablePreview()
  }
}

它將自動重新整理頁面資料（呼叫 nuxtServerInit、asyncData 和 fetch）。

當預覽模式啟用時，將呼叫 asyncData 和 fetch 的原始方法。

命令

根據 target，你可以執行這些命令。

• 伺服器
  • nuxt dev：啟動開發伺服器
  • nuxt build：為生產環境打包 Nuxt 應用程式
  • nuxt start：啟動生產伺服器
• 靜態
  • nuxt dev：啟動開發伺服器（靜態感知）
  • nuxt generate：如果需要，為生產環境打包 Nuxt 應用程式（靜態感知），並將應用程式匯出為靜態 HTML 到 dist/ 目錄
  • nuxt start：從 dist/ 提供你的生產應用程式

接下來做什麼