完整靜態化

太長不看

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

額外獎勵：你可以執行 nuxt start 來執行本機伺服器，以提供你產生的靜態應用程式。

注意：在此影片中，我們使用的是 nuxt export，它已被棄用，改用 nuxt generate。

目錄

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

歷史

自 v0.3.2 (2016 年 11 月) 以來，Nuxt 就具備使用 nuxt generate 的靜態產生功能，從那時起，我們以多種方式改進了它，但從未實現完整的靜態產生。今天，我很興奮地宣布，Nuxt 2.13 現在可以實現完整的靜態匯出。

目前的問題

nuxt generate 主要用於預先渲染，當你在用戶端導航時，會呼叫 asyncData 和 fetch，向你的 API 發出請求。許多用戶要求支援「完整靜態」模式，這表示在導航時不呼叫這 2 個 hook，因為下一個頁面已經預先渲染。

此外，開發人員體驗並不理想

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

請注意，使用 nuxt-payload-extractor 模組可以支援完整靜態，但使用起來更冗長且有局限性。

新的 config 選項：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 將改善開發人員體驗

• 從 context 中移除 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，這表示在用戶端導航時不再需要 HTTP 呼叫你的 API。透過將頁面 payload 提取到 js 檔案中，它也縮減了伺服的 HTML 大小，並預先載入它 (從在 header 中) 以獲得最佳效能。

我們也改進了在執行完整靜態時的 智慧預取，它也會提取 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/ 提供你的生產應用程式

下一步