使用 Vercel CLI 部署
🎯 引言
上一篇我们通过网页控制台完成了部署。学完这篇文章，你将学会使用 Vercel CLI，不打开浏览器，在终端里就能把本地项目直接部署上线。
🧱 为什么需要 CLI
网页控制台部署有一个前提：代码必须先推送到 GitHub。但有时我们只想快速验证一下效果，或者代码还没准备好提交，这时就轮到 CLI 登场了。
Vercel CLI 是 Vercel 官方的命令行工具，它可以把本地目录直接上传到 Vercel 部署，跳过 Git 仓库这一步。
| 对比项 | 网页控制台 | Vercel CLI |
|---|---|---|
| 代码来源 | GitHub 等 Git 仓库 | 本地目录直接上传 |
| 自动化 | push 自动部署 | 手动执行命令 |
| 适合场景 | 正式项目、团队协作 | 快速验证、临时演示 |
两种方式互不冲突，同一个项目可以混用。
🚀 安装并登录
本课程环境使用 Node.js v22.0.0，对应的 Vercel CLI 版本为 56.3.1。
通过 npm 全局安装：
npm install -g vercel@56.3.1
验证安装：
vercel --version
能打印出版本号就可以了。然后登录账号：
vercel login
按提示选择 Continue with GitHub，浏览器会自动打开授权页面，授权成功后终端会显示登录成功的提示。
📦 第一次 CLI 部署
进入上一篇的 vercel-demo 项目目录（任意项目都可以），执行：
vercel
第一次执行会有一串交互式提问，基本一路回车即可：
? Set up and deploy "~/vercel-demo"? [Y/n] y
? Which scope should contain your project? 你的用户名
? Link to existing project? [y/N] n
? What's your project's name? vercel-demo
? In which directory is your code located? ./
部署完成后，终端会打印出一个预览地址：
✅ Preview: https://vercel-demo-xxxx.vercel.app
打开网址就能看到最新的页面了。
vercel 后项目根目录会多出一个 .vercel 文件夹，里面保存着项目和账号的关联信息。建议把它加入 .gitignore，不要提交到仓库。🏭 预览部署 vs 生产部署
注意刚才地址前面的单词是 Preview（预览）。CLI 默认执行的是预览部署，生成一个临时网址，不影响线上正式版本。
确认没问题后，加 --prod 参数发布到生产环境：
vercel --prod
这次的地址就是你的正式域名了：
✅ Production: https://vercel-demo-xxxx.vercel.app
你可以把这两个命令理解成彩排和正式演出：先彩排看看效果，满意了再正式上台。下一篇还会更深入地对比这两种部署。
🧾 小节总结
- Vercel CLI 可以把本地目录直接部署上线，不需要先推送 Git。
- 安装：
npm install -g vercel@56.3.1，登录：vercel login。 vercel执行预览部署，生成临时预览地址。vercel --prod发布到生产环境，更新正式域名内容。.vercel文件夹保存关联信息，应加入.gitignore。
❓ 知识问答
Q1：CLI 部署后，再 git push 会冲突吗？
A：不会。两种部署方式产生的是独立的部署记录，谁的版本新，线上就显示谁。但建议一个项目固定以一种方式为主，避免混乱。
Q2：换一台电脑还要重新 login 吗？
A：需要。登录凭证保存在当前电脑的用户目录下，换电脑后重新执行 vercel login 即可。
Q3：CLI 部署会自动执行 npm run build 吗？
A：会。Vercel 在云端构建的流程和网页控制台完全一致，CLI 只是把代码上传的方式从"Git 拉取"换成了"本地上传"。
Q4：如何退出登录？
A：执行 vercel logout 即可清除本机的登录凭证。
🧪 小练习
- 全局安装
vercel@56.3.1并完成vercel login。 - 在本地修改首页文字后执行
vercel，打开预览地址确认改动；确认无误后执行vercel --prod发布到生产环境。
# 请在这里编写命令
🎉 恭喜你已经掌握了 Vercel CLI！下一篇我们看看项目设置和环境变量，让构建配置更灵活。