Cloudflare

將您的 Nuxt 應用程式部署到 Cloudflare 基礎設施。

Cloudflare Pages

零配置 ✨
與 Cloudflare Pages 的整合無需任何配置即可實現,瞭解更多.
檢視 @nuxthub/core 模組,使用 Cloudflare 構建全棧 Nuxt 應用程式,瞭解更多資訊請訪問hub.nuxt.com.

Git 整合

如果您使用 Cloudflare Pages 的 GitHub/GitLab 整合,無需配置。推送到您的倉庫將自動構建您的專案並進行部署。

Nuxt 將檢測環境以設定正確的伺服器/Nitro 預設.

為了利用邊緣伺服器端渲染,將構建命令設定為:nuxt build

要靜態生成您的網站,將構建命令設定為:nuxt generate

路由匹配

在 Cloudflare Pages 上,如果找到一個 HTML 檔案,其路徑與當前請求的路由匹配,它將提供該檔案。它還將 HTML 頁面重定向到它們的無副檔名對應項:例如,/contact.html 將被重定向到 /contact/about/index.html 將被重定向到 /about/

為了匹配 Cloudflare路由匹配規則,將 nitro 選項 autoSubfolderIndex 設定為 false

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      autoSubfolderIndex: false
    }
  }
})

直接上傳

或者,您可以使用wrangler將您的專案上傳到 Cloudflare。

在這種情況下,您需要手動設定預設。

  1. 為 Cloudflare Pages 構建您的專案
    終端
    npx nuxi build --preset=cloudflare_pages
    
  2. 部署時,它會要求您首次建立一個專案
    終端
    npx wrangler pages deploy dist/
    

瞭解更多

前往 Nitro 文件 瞭解更多關於 Cloudflare 部署預設的資訊。
前往 Cloudflare Pages 文件 瞭解更多資訊。

模板

Atidone

一個具有使用者認證、SSR 和 Cloudflare D1 的待辦事項應用程式。

Atinotes

一個基於 Cloudflare KV 的具有通用渲染的可編輯網站。

Atidraw

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

Nuxt 圖片庫

一個圖片庫,用於上傳、編輯並將您的圖片分享給世界,使用 Cloudflare R2。

瞭解更多

前往 Nitro 文件 瞭解更多關於 Cloudflare 部署預設的資訊。