企业官网建设流程全解析

一、用 Vercel 把已 push 的代码变成 URL（给团队看）

核心一句话

Vercel = GitHub 仓库 → 自动生成可访问 URL

你已经 git push，那就只剩 3 步了：

标准流程（React + Vite 完美适配）

1. 登录 Vercel

用 GitHub / GitLab / Bitbucket 登录

2. Import Project

选你的仓库

• Framework 选：Vite / React

• Build command：npm run build

• Output dir：dist

3. 点 Deploy

几十秒后你会得到：

https://xxx.vercel.app

后续流程（重点）

之后你每一次：

git push

Vercel 都会自动：

• 重新 build

• 生成 新 URL

• 或更新 Production URL

• 完全不用你再管服务器

二、Vercel 可以用多少次？（次数 & 限制）

=

基本可以当“无限次用”，但有资源上限

Free（Hobby）计划（个人 / Demo）

给团队看 Demo / PR / 产品原型 → 完全够用

什么时候会被“限制”？

• CI 构建特别频繁（自动脚本狂 push）

• 文件特别大（大图 / 视频）

• 高访问量（对外公开爆量）

正常开发几乎碰不到

三、Vercel 的费用标准（工程视角）

Hobby（免费）

• $0

• 无限 Preview

• 自动 HTTPS

• Git 集成

• 非商业用途

• “给团队看 / 内部评审 / Demo”首选

Pro（付费）

适合：

• 商业项目

• 正式对客户

• 团队协作

按人收费（每人每月）

• 更高构建 & 带宽

• 团队权限

• 私有项目更友好

四、团队协作中，Vercel 最“值钱”的功能（你一定会用到）

1.Preview Deployment（杀手级）

每个：

• PR

• branch

• push

都会生成一个：

https://branch-name-xxx.vercel.app

团队可以：

• 不拉代码

• 不跑本地

• 直接打开看效果

2. 非技术成员也能看

• 产品经理

• 设计

• 老板

3. 非常适合你的项目

• 多步骤流程

• 表单

• UI 逻辑

• Vercel = 随时可演示

五、和你熟悉的 Angular 场景对照一下

👉 Vercel 把“部署”这件事降维了

六、给你一个「团队最佳实践」建议（很实用）

推荐用法

• main → Production URL

• 每个 feature branch → Preview URL

• PR 里直接贴 Vercel 链接

https://booking-step2-fix.vercel.app

七、一句话总结

Vercel 是“前端的自动展示平台”
push 一次代码，就有一个可访问 URL。
免费版足够内部展示和协作使用。