透過 100 多個技巧的集合學習 Nuxt!
部署

NuxtHub

在您的 Cloudflare 帳戶上以零配置在全球部署 Nuxt 應用程式。
零配置 ✨
與 NuxtHub 的整合可以零配置實現,了解更多

簡介

NuxtHub 是一個由 Cloudflare 提供支援的 Nuxt 部署和管理平台。

Cloudflare 部署的主要區別在於,NuxtHub 提供零配置的部署體驗(配置、部署和管理)。

它還提供了一個強大的管理介面來管理您的 Nuxt 專案(資料庫、Blob、KV ...)以及 遠端儲存

請在 hub.nuxt.com 上閱讀更多資訊。

NuxtHub CLI

您可以使用單一命令部署本地專案

終端機
npx nuxthub deploy

該命令將會

  1. 確保您已登入 admin.hub.nuxt.com
  2. 將您的本地專案與 NuxtHub 專案連結,或協助您建立新的專案
  3. 使用正確的預設配置建置您的 Nuxt 專案
  4. 將其部署到您的 Cloudflare 帳戶並包含所有必要的資源
  5. 為您提供一個 URL 來存取您的專案

觀看影片範例

您也可以使用以下命令在全域安裝 NuxtHub CLInpm i -g nuxthub
如果您使用 NuxtHub CLI 進行首次部署,由於 Cloudflare 的限制,您將無法在之後附加您的 GitHub/GitLab 儲存庫。

使用 Git 部署

  1. 將您的程式碼推送至您的 Git 儲存庫(GitHub 或 GitLab)
  2. 點擊 New Project,然後點擊 Import a Git repository
  3. 選擇您的儲存庫,然後點擊 Import repository
  4. NuxtHub 將在 Cloudflare Pages 上設定您的專案並進行部署
  5. 您的應用程式將使用 .nuxt.dev 網域部署

在您的專案匯入並部署後,後續對分支的所有推送都會產生預覽部署,而對生產分支(通常為「main」)所做的所有變更都將導致生產部署。

範本

Hello Edge

一個在邊緣運行的最小 Nuxt 入門範本。

NuxtHub 入門範本

一個開始使用 NuxtHub 功能(資料庫、Blob、KV ...)的入門範本。

Atidone

一個具有身份驗證和資料庫的全端應用程式,用於管理您的待辦事項。

Nuxt 圖片庫

一個圖片庫,用於上傳、編輯並與世界分享您的圖片。

Atinotes

一個由 Markdown 和 Vue 元件驅動的可編輯網站,具有動態 OG 圖片產生功能。

Atidraw

一個 Web 應用程式,讓您可以使用 Cloudflare R2 和 AI 繪圖並與世界分享您的繪圖。

請在 https://hub.nuxt.com/templates 上查看範本的完整清單