[{"data":1,"prerenderedAt":230},["ShallowReactive",2],{"content:\u002Fposts\u002F2026\u002Fdeploy-nuxt-static-site-to-cloudflare-pages":3,"surround:\u002Fposts\u002F2026\u002Fdeploy-nuxt-static-site-to-cloudflare-pages":219},{"id":4,"title":5,"body":6,"canonical":194,"categories":195,"date":197,"description":198,"draft":199,"extension":200,"image":201,"meta":202,"navigation":203,"path":204,"permalink":194,"readingTime":205,"recommend":194,"references":194,"seo":210,"sitemap":211,"stem":212,"tags":213,"type":194,"updated":197,"__hash__":218},"content\u002Fposts\u002F2026\u002Fdeploy-nuxt-static-site-to-cloudflare-pages.md","Nuxt 静态网站部署到 Cloudflare Pages",{"type":7,"value":8,"toc":180},"minimark",[9,16,20,24,32,35,43,46,50,60,65,69,84,91,102,105,114,128,139,144,147,151,155,158,162,169,173,176],[10,11,12],"alert",{},[13,14,15],"p",{},"这里的经验目前都只适合于在 Nuxt 构建为纯静态网站时。",[17,18,19],"h2",{"id":19},"背景",[21,22,23],"h3",{"id":23},"项目架构",[13,25,26,27,31],{},"本项目使用 Nuxt + Nuxt Content 实现。会使用 ",[28,29,30],"code",{"code":30},"nuxt generate"," 将其构建为纯静态网站。",[21,33,34],{"id":34},"为什么迁移",[13,36,37,38,42],{},"Vercel 很好用，但是想要部署组织中的私有仓库就要花钱了。Cloudflare 是免费的！",[39,40,41],"strong",{},"有便宜不占王八蛋","。",[17,44,45],{"id":45},"迁移",[21,47,49],{"id":48},"_1-关联仓库","1. 关联仓库",[51,52,53,57],"ol",{},[54,55,56],"li",{},"计算 -> Workers 和 Pages -> 创建应用程序",[54,58,59],{},"我这里使用的是 GitHub 仓库，点击后添加一个仓库",[61,62],"pic",{"caption":63,"src":64},"选择一个仓库","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Fcloudflare-select-github-repo.png",[21,66,68],{"id":67},"_2-进行一些配置","2. 进行一些配置",[70,71,72,78],"ul",{},[54,73,74,75],{},"构建配置脚本 ",[28,76,77],{"code":77},"pnpm run generate",[54,79,80,81],{},"部署命令 ",[28,82,83],{"code":83},"npx wrangler deploy",[13,85,86,87,90],{},"这些都保留为默认，如果你项目中没有 ",[28,88,89],{"code":89},"wrangler"," 相关配置，你需要将下面一段粘贴到你的项目中",[92,93,100],"pre",{"className":94,"code":96,"filename":97,"language":98,"meta":99},[95],"language-jsonc","{\n    \"name\": \"weilog\",\n    \"compatibility_date\": \"2026-08-16\",\n    \"assets\": {\n        \"directory\": \".\u002F.output\u002Fpublic\",\n    },\n}\n","wrangler.jsonc","jsonc","",[28,101,96],{"__ignoreMap":99},[13,103,104],{},"我们还需要禁用 nitro 自动生成 deployConfig",[92,106,112],{"className":107,"code":109,"filename":110,"language":111,"meta":99},[108],"language-ts","nitro: {\n  cloudflare: {\n    \u002F\u002F 禁用自动生成 wrangler.json \u002F .wrangler\u002Fdeploy\u002Fconfig.json。\n    \u002F\u002F 否则 Cloudflare Pages 构建时会读取生成的 wrangler.json（含 pages_build_output_dir），\n    \u002F\u002F 转而执行 `wrangler deploy`（Workers 命令），触发：\n    \u002F\u002F \"It looks like you've run a Workers-specific command in a Pages project\"\n    deployConfig: false,\n  }\n}\n","nuxt.config.ts","ts",[28,113,109],{"__ignoreMap":99},[115,116,117],"blockquote",{},[70,118,119,122,125],{},[54,120,121],{},"name 改为你项目的名称，保持和你 works 中的名称一致。",[54,123,124],{},"compatibility_date 可以改为当期日期。",[54,126,127],{},"assets 部分不需要改变",[13,129,130,131,134,135,138],{},"这里我们还用到了 ",[28,132,133],{"code":133},"generate"," 脚本，你需要在 ",[28,136,137],{"code":137},"package.json"," scripts 中配置",[140,141],"copy",{"code":142,"lang":143},"\"generate\": \"nuxt generate\"","json",[13,145,146],{},"确保你项目中有这几个配置后就可以点击部署了。",[61,148],{"caption":149,"src":150},"配置脚本","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Fcloudflare-create-worker.png",[21,152,154],{"id":153},"_3-进行部署","3. 进行部署",[13,156,157],{},"点击部署后就是等待了，如果你按照我的步骤来走，那么应该不会遇到什么别的问题。如果你遇到了别的问题，也可以在下方进行分享！",[61,159],{"caption":160,"src":161},"部署成功","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Fcloudflare-deploy.png",[13,163,164,165,168],{},"这时候你还不能预览，你可以在 ",[28,166,167],{"code":167},"域"," 中将 Worker URL 开启就可以预览了",[61,170],{"caption":171,"src":172},"开启 Worker URL","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Fcloudflare-set-default-domains.png",[13,174,175],{},"当然我们肯定希望用自己的域名来进行访问。那么我们可以点击下面的添加域名绑定你托管在 Cloudflare 中的域名就好了。至于如何在 Cloudflare 中托管域名，这里就不做过多介绍了。",[61,177],{"caption":178,"src":179},"设置自定义域名","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Fcloudflare-set-custom-domain.png",{"title":99,"searchDepth":181,"depth":181,"links":182},4,[183,189],{"id":19,"depth":184,"text":19,"children":185},2,[186,188],{"id":23,"depth":187,"text":23},3,{"id":34,"depth":187,"text":34},{"id":45,"depth":184,"text":45,"children":190},[191,192,193],{"id":48,"depth":187,"text":49},{"id":67,"depth":187,"text":68},{"id":153,"depth":187,"text":154},null,[196],"经验分享","2026-08-16 23:42:13","我的网站已经从 Vercel 迁移到 Cloudflare 中，这中间遇到了一些问题。整理成文，希望在你有迁移的需要并且遇到一些问题的时候能给你一些帮助。",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Fdeploy-nuxt-static-site-to-cloudflare-pages.webp",{},true,"\u002Fposts\u002F2026\u002Fdeploy-nuxt-static-site-to-cloudflare-pages",{"text":206,"minutes":207,"time":208,"words":209},"3 min read",2.47,148200,494,{"title":5,"description":198},{"loc":204},"posts\u002F2026\u002Fdeploy-nuxt-static-site-to-cloudflare-pages",[214,215,216,217],"Vue","Nuxt","Cloudflare","SSG","7ipJ-vs0znLBl1dLgBg-g5mtFdS7sNSUIKMACK_mXY8",[220,225],{"title":221,"path":222,"stem":223,"date":224,"type":194,"children":-1},"发布自己的 shadcn-vue 扩展组件，并支持 CLI 安装","\u002Fposts\u002F2026\u002Fpublish-your-own-shadcn-extension-with-cli","posts\u002F2026\u002Fpublish-your-own-shadcn-extension-with-cli","2026-08-02 10:50:03",{"title":226,"path":227,"stem":228,"date":229,"type":194,"children":-1},"自用 skill 推荐","\u002Fposts\u002F2026\u002Frecommended-skills-for-personal-use","posts\u002F2026\u002Frecommended-skills-for-personal-use","2026-08-21 15:30:01",1789642584638]