通过 100 多个技巧学习 Nuxt!
部署

Cloudflare

将你的 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。

在这种情况下,您必须手动设置预设。

  1. 为 Cloudflare Pages 构建您的项目
    终端
    npx nuxi build --preset=cloudflare_pages
    
  2. 部署,它将要求您首次创建项目
    终端
    wrangler pages deploy dist/
    

了解更多

请查阅 **Nitro 文档**以了解有关 Cloudflare 部署预设的更多信息。
请查阅 **Cloudflare Pages** 文档以了解更多信息。

模板

Atidone

一个带有用户身份验证、SSR 和 Cloudflare D1 的 todos 应用程序。

Atinotes

一个基于 Cloudflare KV 的通用渲染的可编辑网站。

Atidraw

一个 Web 应用程序,让您可以使用 Cloudflare R2 和 AI 绘制并与世界分享您的绘图。

Nuxt 图片库

一个图片库,用于上传、编辑和与世界分享您的图片,使用 Cloudflare R2。

了解更多

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