使用 nuxi generate 進行預渲染和部署

Amd794發表於2024-09-04
UX

title: 使用 nuxi generate 進行預渲染和部署
date: 2024/9/4
updated: 2024/9/4
author: cmdragon

excerpt:
透過 nuxi generate 命令，你可以輕鬆地將 Nuxt 應用程式預渲染為靜態 HTML 檔案，並將其部署到任何靜態託管服務。這種方法可以提高應用程式的效能和安全性，特別適用於那些需要快速載入的應用。

categories:

  • 前端開發

tags:

  • Nuxt
  • 預渲染
  • 部署
  • 靜態
  • HTML
  • 效能
  • 安全性

image
image

掃描二維碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

Nuxt.js 提供了強大的功能來構建和最佳化現代 Web 應用。nuxi generate 命令是 Nuxt 的一部分，用於預渲染你的應用程式，並將結果儲存為靜態 HTML 檔案。這使得你可以將應用程式部署到任何靜態託管服務上。

什麼是 nuxi generate？

nuxi generate 命令用於預渲染你的 Nuxt 應用程式的每個路由，並將這些頁面儲存為靜態的 HTML 檔案。這種靜態生成方法可以提高頁面載入速度，並允許你將應用程式部署到靜態託管服務，如 GitHub Pages、Netlify 或 Vercel。

安裝 Nuxt 和準備專案

確保你已經在機器上安裝了 Node.js 和 Nuxt。如果還沒有，你可以透過以下步驟進行安裝：

  1. 安裝 Node.js：訪問 Node.js 官方網站 下載並安裝 Node.js。

  2. 建立 Nuxt 專案：

    使用以下命令建立一個新的 Nuxt 應用：

    npx nuxi@latest init my-nuxt-app

    按照提示選擇適合你的選項，完成專案建立後，進入專案目錄：

    cd my-nuxt-app

使用 nuxi generate

nuxi generate 命令用於生成靜態 HTML 檔案。預設情況下，它會渲染你的應用程式中的所有路由並將其儲存為 HTML 檔案。這些檔案可以被部署到任何靜態託管服務上。

執行命令

在你的 Nuxt 專案目錄中，執行以下命令來生成靜態檔案：

npx nuxi generate

這會執行預渲染並將生成的 HTML 檔案儲存在 ./dist 目錄中。nuxi generate 實際上會呼叫 nuxi build 並將 prerender 引數設定為 true。

使用其他選項

  • 指定根目錄：如果你的應用程式不在當前目錄中，你可以指定根目錄。例如：

    npx nuxi generate /path/to/your/app

  • 載入自定義環境檔案：使用 --dotenv 選項來指定另一個 .env 檔案：

    npx nuxi generate --dotenv .env.production

部署靜態檔案

生成的靜態 HTML 檔案將儲存在 ./dist 目錄中。你可以將這些檔案部署到靜態託管服務上。以下是一些常見的靜態託管服務及其部署步驟：

部署到 GitHub Pages

  1. 安裝 gh-pages 工具：

    npm install --save-dev gh-pages

  2. 新增部署指令碼：在 package.json 中新增部署指令碼：

    "scripts": {
  "deploy": "gh-pages -d dist"
}

  3. 執行部署命令：

    npm run deploy

部署到 Netlify

  1. 登入 Netlify，並點選 “New site from Git”。

  2. 選擇你的 Git 倉庫，並按照提示完成部署設定。

  3. 設定釋出目錄 為 dist。

部署到 Vercel

  1. 登入 Vercel，並點選 “New Project”。

  2. 選擇你的 Git 倉庫，並按照提示完成部署設定。

  3. 設定輸出目錄 為 dist。

總結

透過 nuxi generate 命令，你可以輕鬆地將 Nuxt 應用程式預渲染為靜態 HTML 檔案，並將其部署到任何靜態託管服務。這種方法可以提高應用程式的效能和安全性，特別適用於那些需要快速載入的應用。

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：使用 nuxi generate 進行預渲染和部署 | cmdragon's Blog

往期文章歸檔：

  • 探索 Nuxt Devtools：功能全面指南 | cmdragon's Blog
  • 使用 nuxi dev 啟動 Nuxt 應用程式的詳細指南 | cmdragon's Blog
  • 使用 nuxi clean 命令清理 Nuxt 專案 | cmdragon's Blog
  • 使用 nuxi build-module 命令構建 Nuxt 模組 | cmdragon's Blog
  • 使用 nuxi build 命令構建你的 Nuxt 應用程式 | cmdragon's Blog
  • 使用 nuxi analyze 命令分析 Nuxt 應用的生產包 | cmdragon's Blog
  • 使用 nuxi add 快速建立 Nuxt 應用元件 | cmdragon's Blog
  • 使用 updateAppConfig 更新 Nuxt 應用配置 | cmdragon's Blog
  • 使用 Nuxt 的 showError 顯示全屏錯誤頁面 | cmdragon's Blog
  • 使用 setResponseStatus 函式設定響應狀態碼 | cmdragon's Blog
  • 如何在 Nuxt 中動態設定頁面佈局 | cmdragon's Blog
  • 使用 reloadNuxtApp 強制重新整理 Nuxt 應用 | cmdragon's Blog
  • 使用 refreshNuxtData 重新整理 Nuxt應用 中的資料 | cmdragon's Blog
  • 使用 prerenderRoutes 進行預渲染路由 | cmdragon's Blog
  • 使用 preloadRouteComponents 提升 Nuxt 應用的效能 | cmdragon's Blog
  • 使用 preloadComponents 進行元件預載入 | cmdragon's Blog
  • 使用 prefetchComponents 進行元件預取 | cmdragon's Blog
  • 使用 onNuxtReady 進行非同步初始化 | cmdragon's Blog
  • 使用 onBeforeRouteUpdate 組合式函式提升應用的使用者體驗 | cmdragon's Blog
  • 使用 onBeforeRouteLeave 組合式函式提升應用的使用者體驗 | cmdragon's Blog

相關文章