將 Nuxt 部署到 Cloudflare

Cloudflare Pages

零配置 ✨
與 Cloudflare Pages 的整合可以零配置完成，了解更多。

查看 @nuxthub/core 模組，以使用 Cloudflare 建構全端 Nuxt 應用程式，並在 hub.nuxt.com 上了解更多。

Git 整合

如果您使用 GitHub/GitLab 與 Cloudflare Pages 的整合，則無需任何設定。推送到您的儲存庫將自動建置您的專案並部署它。

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。

在這種情況下，您必須手動設定預設。

為 Cloudflare Pages 建置您的專案
終端機
```
npx nuxi build --preset=cloudflare_pages
```
部署，它會要求您第一次建立專案
終端機
```
wrangler pages deploy dist/
```

了解更多

前往 Nitro 文件以了解有關 Cloudflare 部署預設的更多資訊。

前往 Cloudflare Pages 文件以了解有關它的更多資訊。

範本

Atidone

一個具有使用者驗證、SSR 和 Cloudflare D1 的 todo 應用程式。

Atinotes

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

Atidraw

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

Nuxt 圖片庫

一個圖片庫，可讓您上傳、編輯和與世界分享您的圖片，使用 Cloudflare R2。

了解更多

前往 Nitro 文件以了解有關 cloudflare 部署預設的更多資訊。

Cleavr

將您的 Nuxt 應用程式部署到 Cleavr 基礎架構。

Deno Deploy

將您的 Nuxt 應用程式部署到 Deno Deploy 基礎架構。