Nuxt 静态网站部署到 Cloudflare Pages

背景

项目架构

本项目使用 Nuxt + Nuxt Content 实现。会使用 nuxt generate 将其构建为纯静态网站。

为什么迁移

Vercel 很好用，但是想要部署组织中的私有仓库就要花钱了。Cloudflare 是免费的！有便宜不占王八蛋。

迁移

1. 关联仓库

1. 计算 -> Workers 和 Pages -> 创建应用程序
2. 我这里使用的是 GitHub 仓库，点击后添加一个仓库

2. 进行一些配置

• 构建配置脚本 pnpm run generate
• 部署命令 npx wrangler deploy

这些都保留为默认，如果你项目中没有 wrangler 相关配置，你需要将下面一段粘贴到你的项目中

{
    "name": "weilog",
    "compatibility_date": "2026-08-16",
    "assets": {
        "directory": "./.output/public",
    },
}

我们还需要禁用 nitro 自动生成 deployConfig

nitro: {
  cloudflare: {
    // 禁用自动生成 wrangler.json / .wrangler/deploy/config.json。
    // 否则 Cloudflare Pages 构建时会读取生成的 wrangler.json（含 pages_build_output_dir），
    // 转而执行 `wrangler deploy`（Workers 命令），触发：
    // "It looks like you've run a Workers-specific command in a Pages project"
    deployConfig: false,
  }
}

• name 改为你项目的名称，保持和你 works 中的名称一致。
• compatibility_date 可以改为当期日期。
• assets 部分不需要改变

这里我们还用到了 generate 脚本，你需要在 package.json scripts 中配置

确保你项目中有这几个配置后就可以点击部署了。

3. 进行部署

点击部署后就是等待了，如果你按照我的步骤来走，那么应该不会遇到什么别的问题。如果你遇到了别的问题，也可以在下方进行分享！

这时候你还不能预览，你可以在 域 中将 Worker URL 开启就可以预览了

当然我们肯定希望用自己的域名来进行访问。那么我们可以点击下面的添加域名绑定你托管在 Cloudflare 中的域名就好了。至于如何在 Cloudflare 中托管域名，这里就不做过多介绍了。