Nuxt 应用部署到 Cloudflare

Cloudflare Pages

Cloudflare Pages 提供 零配置 部署 Nuxt 应用的能力。
集成 Cloudflare Pages 时，你无需额外配置，项目即可自动构建和部署。

• 你可以查看 @nuxthub/core 模块，以便在 Cloudflare 上构建完整的 Nuxt 全栈应用。

Git 集成

如果使用 GitHub 或 GitLab 与 Cloudflare Pages 集成：

• 不需要额外配置。
• 将代码推送到仓库后，Cloudflare Pages 会自动构建并部署你的项目。
• Nuxt 会自动检测环境，并设置正确的 Server/Nitro 预设。

构建命令

根据你的需求选择构建命令：

• 开启边缘服务器端渲染（SSR）：

nuxt build

• 静态生成网站：

nuxt generate

路由匹配

在 Cloudflare Pages 上：

• 如果找到匹配当前请求路径的 HTML 文件，则会直接返回该文件。

• HTML 页面会被重定向到无扩展名的路径。例如：

  • /contact.html 会重定向到 /contact
  • /about/index.html 会重定向到 /about/

为了匹配 Cloudflare 的路由规则，需要在 Nuxt 中设置 autoSubfolderIndex 为 false。

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      autoSubfolderIndex: false
    }
  }
})

直接上传（Wrangler）

如果你希望直接使用 Wrangler 上传项目到 Cloudflare：

1. 构建项目并设置预设为 Cloudflare Pages：

npx nuxi build --preset=cloudflare_pages

2. 部署项目（首次部署会提示创建 Cloudflare Pages 项目）：

npx wrangler pages deploy dist/

这样，你的 Nuxt 应用就可以部署到 Cloudflare 基础设施上，并支持 SSR 或静态生成。