Deploy

Cloudflare

在 Cloudflare 基础设施上部署你的 Nuxt 应用。

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. 部署,首次部署时会要求你创建一个项目:
    终端
    wrangler pages deploy dist/
    

了解更多

请参阅 Nitro 文档 以了解更多关于 Cloudflare 部署预设的信息。
请参阅 CloudFlare Pages 文档 以了解更多信息。

模板

Atidone

包含用户认证、SSR 和 Cloudflare D1 的待办事项应用。

Atinotes

基于 Cloudflare KV 的可编辑网站,具有通用渲染。

Atidraw

通过 Cloudflare R2 和人工智能,让您可以绘制并与世界分享您的绘画的网络应用程序。

Nuxt Image Gallery

使用 Cloudflare R2 上传、编辑和共享图像的图像库。

了解更多

请参阅 Nitro 文档 以了解更多关于 cloudflare 部署预设的信息。