Vercel 上线：AI 编码代理的一条命令部署
💡 一句话总结：Vercel 上线的最短路径——
npm i -g vercel装一次、vercel login登一次，之后每次发布都是一条命令的事；而且这几条命令可以整段交给 AI 编码代理代跑。
搜「Vercel 部署教程」，出来的多是英文原版文档，从注册、建项目、连仓库一路讲下来，步骤一多就容易卡在半路。这一篇中文教程把它讲短：本地文件夹 + 几条命令，十来分钟把 AI 做好的页面发到公网——正在用 AI 编码代理的你，甚至可以让代理把这些命令全部代跑。
这是场景实战 A 路线（做网站）的第 4 课，也是三条上线路线的最后一条：A2 GitHub Pages 走网页向导、A3 Cloudflare Pages 走拖拽上传，本课的 Vercel 走命令行——对用 AI 代理写代码的人来说，它通常是最顺手的一条。
- 页面还没做出来？先回 A1 用 AI 做网站
- 想先比完三家再动手？直接跳 A5 部署平台对比
学完你能做什么
- 装好并登录 Vercel CLI：
npm i -g vercel+vercel login（前提 Node.js 18+） - 在项目目录跑一条
vercel命令完成部署，再用vercel --prod发布给大家看的正式版 - 把整套部署交给 AI 编码代理：发一段提示词，它替你跑命令、回传线上链接
- 说得出 Hobby 免费计划的边界：每月 100 GB 流量、每天 100 次部署、200 个项目，且仅限非商业的个人使用
你现在的困境
- 「页面文件 AI 都帮我写好了，可一搜部署全是英文文档，CLI、build、deploy 一堆词，看着就头大」
- 「GitHub Pages 要建仓库，Cloudflare 要进控制台找入口，就没有更省事的上线方式吗」
- 「AI 代理明明会跑终端命令，上线这步为什么还得我一条条手动来？」
什么时候用这一招
当你需要：
- 最快把本地那文件夹静态页面发到公网，拿到一个能分享的链接
- 以后每次改版，重新发布也只是一条命令的事
- 让 AI 编码代理全程代劳——跑终端命令本来就是它的强项
而且不想：
- 建 Git 仓库、管分支（Vercel CLI 的官方流程不经过仓库）
- 在控制台表单里一项项填构建配置
🎒 开始前的准备
- 已完成 A1 用 AI 做网站：本地有一个文件夹的静态页面（A1 的产出，入口通常是
index.html） - 注册一个 Vercel 账号（官网免费注册，个人用的默认就是 Hobby 免费计划）
- 电脑上装了 Node.js 18 或更高版本（Vercel 官方要求 Node.js 18+，可从 nodejs.org 下载安装）
系统要求
| 项目 | 要求 |
|---|---|
| Node.js | 18 及以上 |
| 包管理器 | npm / pnpm / yarn / bun 任一 |
| 账号 | Vercel 账号（Hobby 计划免费） |
| 项目 | 本地项目文件夹（A1 产出的静态页面） |
核心思路
Vercel 官方的工作流从 CLI 开始：装一次、登录一次，之后每次部署都是一条命令。CLI 会自动检测你的项目用什么框架，接着构建、部署——你不用填构建命令，也不用挑输出目录。
部署分两档，命令只差一个参数：
vercel：预览部署，跑完给你一个预览 URL，自己先看效果vercel --prod：生产部署，发给大家看的正式版本
两条上线方式，选一条
| 对比 | 方式 A：CLI 一条命令（本课主线） | 方式 B：控制台连 Git |
|---|---|---|
| 操作位置 | 终端 | 浏览器控制台 |
| 要不要仓库 | 官方流程不经过 Git 仓库，本地文件夹直接部署 | 代码须在 GitHub / GitLab / Bitbucket 仓库 |
| 首次上线 | vercel + vercel --prod 两条命令 | New Project 页选仓库点 Deploy |
| 之后的更新 | 再跑一次 vercel --prod | 每次 push 自动触发新部署 |
| 适合谁 | 在用 AI 编码代理、想最快上线 | 已会 Git、想要「推送即发布」 |
Hobby 免费计划给多少额度
免费注册用的就是 Hobby 计划，vercel 免费额度主要看这几项：
| 项目 | Hobby 免费额度 |
|---|---|
| 项目数 | 200 个 |
| 部署次数 | 每天 100 次 |
| 流量（Fast Data Transfer） | 每月 100 GB |
| 每项目自定义域名 | 50 个 |
| 函数调用（Function Invocations） | 每月 1,000,000 次 |
| 图片转换（Image Transformations） | 每月 5,000 次 |
| 超额后果 | 多数功能须等 30 天才能恢复（Web Analytics 暂停 7 天后可恢复） |
个人主页、作品集这类站点，100 GB/月绰绰有余。
⚠️ Hobby 计划不能商用
Hobby 计划的公平使用条款写明：仅限非商业、个人使用。公司官网、接单项目请升级 Pro（开发者席位 $20/用户/月），或看 A5 部署平台对比 换平台。
跟我做
第 1 步：安装 Vercel CLI（一条全局命令）
为什么：Vercel 官方说「每个工作流都从 CLI 开始」——连 AI 代理部署项目，用的也是它。
推荐做法（装了 Node 就自带 npm）：
npm i -g vercel已经在用 pnpm / yarn / bun 的读者，四选一：
pnpm i -g vercel
yarn global add vercel
bun add -g vercel你应该看到：安装日志滚完、终端回到提示符，没有红色报错。
- 小检查：安装过程无报错（装没装好，下一步登录立刻见分晓）
第 2 步：登录你的 Vercel 账号（vercel login）
为什么：部署前要把 CLI 和你的 Vercel 账号绑定，之后的部署才会记在你的项目里。
vercel login你应该看到：CLI 给出认证提示，跟着提示完成与 Vercel 账号的认证，回到终端显示登录成功。
- 小检查：终端确认已登录你的账号
第 3 步：跑通 Vercel 部署教程的核心命令（vercel）
为什么：这一条命令就是整个 Vercel 部署教程的主角——CLI 自动检测框架、构建项目、完成部署，全在一条命令里。
操作：先进入你的项目文件夹（A1 里 AI 生成页面的那个目录），再运行：
vercel你应该看到：CLI 检测框架 → 构建 → 部署一气呵成，最后给出一个预览 URL；用浏览器打开，你的页面已经在线上了。
- 小检查：预览 URL 在浏览器里能打开你的页面
第 4 步：发布生产部署（vercel --prod）
为什么：第 3 步的 vercel 生成的是预览部署；给访客看的正式版本，要再跑一条命令。
vercel --prod你应该看到：又一次构建部署完成，这次拿到的是生产 URL——发朋友圈、印名片就用它（vercel.app 域名下的线上地址）。
- 小检查：生产 URL 能访问，页面内容与预览一致
第 5 步：把整套部署交给 AI 编码代理（推荐）
为什么：以上四步全是终端命令，而跑终端命令正是 AI 编码代理的强项。Vercel 官方在 Getting started 文档里直接给了一段「Agent prompt」——让代理装 CLI、登录、部署、回传链接一次跑完。
操作：在项目目录打开你的 AI 编码代理，把下面这段话发给它：
帮我部署到 Vercel：
1. 全局安装 Vercel CLI（npm i -g vercel），用 vercel login 登录。
2. 在当前项目目录运行 vercel 完成部署，把预览链接发给我。
3. 根据我的项目建议下一步，比如绑定自定义域名、配置环境变量。你应该看到：代理替你跑完第 1–4 步的命令，最后把线上链接贴回对话里。
还没装 AI 编码代理？回 1.5 安装 Claude Code；想要桌面版，看 1.5b 安装备用方式。
💡 官方还有「三件套」
Vercel 还为 AI 代理准备了 Plugin / Skills / MCP 三件套，让代理能直接查官方文档、管项目和部署——这套进阶玩法在 5.2 Vercel × AI 工具链 专讲。
方式 B：不用命令行，控制台连 Git 部署
前提：页面文件已经推送到 GitHub / GitLab / Bitbucket 仓库（A2 GitHub Pages 建过仓库的话直接复用）。
- 打开 Vercel 控制台的 New Project 页面
- 连接你的 GitHub / GitLab / Bitbucket 账号
- 选一个仓库，点 Deploy
你应该看到：部署完成后拿到线上地址；之后每次 push 到连接的分支，都会自动触发一次新部署。
检查点 ✅
npm i -g vercel安装无报错，vercel login显示已登录- 项目目录跑
vercel拿到预览 URL，浏览器能打开 vercel --prod后生产 URL 可访问- 能说出 Hobby 计划的三条边界：每天 100 次部署、每月 100 GB 流量、仅限非商业个人使用
- 知道超额后果：多数功能要等 30 天才能恢复
踩坑提醒
❌ 坑 1：Node.js 版本低于 18
现象：安装或运行 CLI 时报错。 原因：Vercel CLI 官方要求 Node.js 18+。 正确做法：先确认 Node 版本不低于 18（低了就去 nodejs.org 装新版），再重新 npm i -g vercel。
❌ 坑 2：跑完 vercel 就把链接当正式地址发出去
现象：发出去的链接是预览部署，不是正式版本。 原因：vercel 生成预览部署，对外发布要用 vercel --prod 的生产部署。 正确做法：自己验收用预览 URL，对外分享用 vercel --prod 的生产 URL。
❌ 坑 3：拿 Hobby 免费计划部署商业项目
现象：公司官网、接单作品用 Hobby 计划上线，不符合平台规则。 原因：Hobby 计划的公平使用条款写明「仅限非商业、个人使用」。 正确做法：商业项目升级 Pro（开发者席位 $20/用户/月），或看 A5 部署平台对比 换平台。
❌ 坑 4：以为超额第二天就能恢复
现象：流量或部署次数用超，相关功能被暂停。 原因：Hobby 计划超额后，多数功能要等 30 天才能再用（Web Analytics 是例外，暂停 7 天后可恢复）。 正确做法：上线后留意用量；个人站点一般碰不到上限，高流量项目提前考虑 Pro 或其他平台。
进阶技巧
- 一键加数据库：项目要存数据？
vercel install neon（或upstash、supabase）能直接从 CLI 装 Marketplace 集成，Vercel 会把凭据自动写进项目的.env.local。 - 绑定自己的域名：不想要 vercel.app 后缀？Vercel 官方文档有 "Add a custom domain" 指南，通用做法见 5.3 自定义域名。
- 让代理深度接管：装上 Vercel 的 Plugin / Skills / MCP，AI 代理就能查官方文档、管项目和部署，见 5.2 Vercel × AI 工具链。
本课小结
✅ 这篇 Vercel 部署教程的最短路径：
npm i -g vercel→vercel login→vercel→vercel --prod，四条命令走完从安装到上线vercel出预览、vercel --prod出生产，对外分享用后者- 不碰命令行也行：控制台 New Project 页连 Git 仓库，之后 push 即自动部署
- Hobby 免费计划：200 个项目 / 每天 100 次部署 / 每月 100 GB 流量 / 每项目 50 个域名，仅限非商业个人使用
- 整套流程可以打包成一段提示词，交给 AI 编码代理执行
| 命令 | 作用 | 什么时候用 |
|---|---|---|
npm i -g vercel | 全局安装 Vercel CLI | 只需一次 |
vercel login | 登录 Vercel 账号 | 只需一次（换账号时再来） |
vercel | 预览部署，出预览 URL | 每次想先看效果 |
vercel --prod | 生产部署，出正式 URL | 对外发布、更新正式版 |
vercel install neon | 一键装数据库类集成 | 项目需要存储时 |
下一课预告
三条上线路线都走完了——GitHub Pages、Cloudflare Pages、Vercel 各有各的免费额度和脾气。下一课 A5 部署平台对比：免费额度、限制与怎么选 把三家放进一张表。
你会学到：
- 三家的免费额度分别给多少、超额了会怎样
- 不同人群（不碰命令行 / 会 Git / 用 AI 代理）分别选哪家
- 拿不准的时候，按什么顺序做决定