Bolt.new 部署与发布
先别急着“上生产”。我建议你先做一次最小可部署验证。这一步能帮你拦住大部分踩坑。最常见的问题不是代码,而是环境变量没配、构建命令不对、静态资源路径错误(经验推断)。
举个真实到不能再真实的例子(经验推断,2026-02):Bolt.new 生成的 Vite 项目部署到 GitHub Pages 时,常常因为 base 路径没改导致样式和图片 404。把 vite.config.ts 的 base 设置为仓库名后即可解决。
TL;DR
- 首选 Netlify 一键部署,确认能跑再考虑迁移。
- 需要长期维护时,导出到 GitHub 再接 Vercel/Netlify。
- 环境变量先用
.env.example统一模板。
部署方式对比
| 方式 | 适合场景 | 优点 | 风险 |
|---|---|---|---|
| Netlify 一键部署 | 快速演示 | 省心、最快 | 可控性低 |
| GitHub → Vercel | 长期维护 | 工程化清晰 | 初期配置稍多 |
| 本地导出 | 深度改造 | 自由度最高 | 需要本地环境 |
1. 一键部署到 Netlify
这是 Bolt.new 最推荐的发布方式。如果你的目标是“尽快拿到可访问链接”,这条路径最省心。你不需要先理解构建流程,先让它跑起来,再决定是否迁移。
- 点击 Deploy 按钮(预览界面右上角)。
- 授权 Netlify 账号。
- 系统自动构建并生成公开 URL。
做到这里,你就已经拥有一个可以演示的线上地址了。
2. 导出到本地开发 (Local Development)
如果你想在自己的服务器上部署,或者需要更深入的代码修改:
- 点击 Download,下载 ZIP。
- 解压后执行
npm install。 - 运行
npm run dev测试。
这一步的意义是:你可以在本地掌控依赖、结构和发布流程。
3. 发布到主流托管平台
由于 Bolt 生成的项目是标准的 Node.js/Vite/Next.js 项目,你可以轻松地将其部署到任何平台。
Vercel (推荐用于 Next.js)
- 将下载的代码推送到 GitHub。
- 在 Vercel 导入仓库。
- 配置环境变量,例如
DATABASE_URL。
GitHub Pages (仅限静态应用)
- 设置
vite.config.ts的base路径。 - 运行
npm run build。 - 推送
dist到gh-pages分支。
做到这一步,你基本就能把原型迁移成可持续的部署方案了。
4. 环境变量配置
先把概念讲清楚:
【环境变量】是什么
运行时需要的配置值(如 API Key、数据库地址)。
它用在部署和运行阶段。
你可以用 .env.example 统一模板。
如果你的应用涉及 API 密钥(如 OpenAI 密钥、数据库连接串):
- 先让 Bolt 生成
.env.example。 - 不要在 Prompt 里输入真实密钥。
- 下载到本地后再补
.env。
一个常用的 .env.example 模板:
DATABASE_URL=
OPENAI_API_KEY=
NEXT_PUBLIC_API_BASE=
你可以先让 Bolt 生成 .env.example,再在本地补齐真实 .env。这样做的好处是:不会把密钥暴露在对话里,也方便团队协作。
4.5 部署前的 3 个确认
这三点不做,最容易“部署成功但打不开”:
- Build Command 是否正确:Vite/Next.js 通常是
npm run build。 - Output 目录是否正确:Vite 默认是
dist,Next.js 默认是.next。 - 环境变量是否齐全:缺一个就会在运行时报错。
做完这三项,部署就会稳很多。
5. 常见坑与修复
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 404 或白屏 | 输出目录错 | 检查 Output 配置 |
| 样式丢失 | base 未设置 | 补齐 vite.config.ts |
| API 报错 | 环境变量缺失 | 补齐 .env |
6. 行动清单
- 先完成一次最小部署。
- 回到本地跑一次
npm run build。 - 把
.env.example写全。 - 上线后访问首页和关键页面。
做到这里,你就具备了“可上线”的基本能力。
7. 从原型到生产
Bolt.new 非常适合快速原型制作(Prototyping)。对于正式生产环境,我们建议:
- 进行代码审查。
- 添加基础测试。
- 优化依赖体积。
小结
这一页解决的是“如何把原型跑到线上”。下一步如果你还没掌握 Prompt 写法,请回到 Prompt 技巧,先把输入写清楚,输出才会稳定。