將 Nuxt 部署到 Cloudflare

Cloudflare Pages

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

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

Git 整合

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

Nuxt 將偵測環境以設定正確的 Server/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 的 todos 應用程式。

Atinotes

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

Atidraw

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

Nuxt Image Gallery

一個影像藝廊，可讓您上傳、編輯影像並與世界分享，使用 Cloudflare R2。

了解更多

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

Clever Cloud

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

Deno Deploy

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