将 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/
```

禁用自动压缩

确保在**CloudFlare -> 速度 -> 优化 -> 自动压缩**中禁用 HTML、CSS 和 JavaScript 的压缩，以避免任何 Vue 水合。

Disable Cloudflare auto minify

了解更多

转到Nitro 文档以了解有关 Cloudflare 部署预设的更多信息。

转到CloudFlare Pages 文档以了解更多信息。

模板

Atidone

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

Atinotes

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

Atidraw

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

Nuxt 图像库

一个图像库，可让您上传、编辑和与世界分享您的图像，使用 Cloudflare R2。

了解更多

转到Nitro 文档以了解有关 cloudflare 部署预设的更多信息。

Cleavr

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

Deno Deploy

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