完全靜態化

太長不想看

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

額外功能：您可以執行 nuxt start 來運行一個本地伺服器，為您產生的靜態應用程式提供服務。

注意：在本影片中，我們使用的是 nuxt export，該命令已被棄用，改用 nuxt generate。

目錄

• 太長不想看
• 目錄
• 歷史
• 目前問題
• 新配置選項：target
• 更聰明的 nuxt generate
  • 速度極快的靜態應用程式
  • 整合的爬蟲
  • 更快的重新部署
• 更聰明的 nuxt start
• 預覽模式
• 命令
  • 下一步

歷史

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 大小，並預先載入它（從在標頭中）以獲得最佳效能。

我們也改進了在執行完全靜態時的智慧預取，它也會提取 payload，使導航瞬間完成 👀

整合的爬蟲

最重要的是，它內部也有一個爬蟲，會偵測每個相對連結並產生它

如果您想要排除一組路由，請使用 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 應用程式（靜態感知）並將您的應用程式匯出到 dist/ 目錄中的靜態 HTML
  • nuxt start：從 dist/ 提供您的生產應用程式

下一步