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 部署预设的信息。

Clever Cloud

将您的 Nuxt 应用程序部署到 Clever Cloud 基础设施。

Deno Deploy

将您的 Nuxt 应用程序部署到 Deno Deploy 基础设施。