Vercel部署全攻略:从GitHub到上线,10分钟让你的前端项目免费拥有自己的域名
写在前面
你有没有遇到过这样的情况:
你: 熬夜做了个酷炫的前端项目 朋友: 能给我看看吗? 你: 呃...你先在本地clone下来,然后npm install,再npm run dev... 朋友: 算了算了 (转身离开) 这就是没有部署上线的尴尬。你辛辛苦苦写的代码,躺在GitHub仓库里无人问津,想展示给别人看还得让对方搭建开发环境。
今天这篇文章,我将手把手教你如何用Vercel把你的前端项目部署到公网,让任何人都能通过一个链接访问你的作品。最重要的是:完全免费,无需服务器,10分钟搞定!
为什么选择Vercel?
在众多前端部署平台中(Netlify、GitHub Pages、Cloudflare Pages等),我为什么推荐Vercel?
Vercel的核心优势
| 特性 | Vercel | GitHub Pages | 传统服务器 |
|---|---|---|---|
| 免费额度 | ⭐⭐⭐⭐⭐ 个人用足够 | ⭐⭐⭐⭐ 静态网站 | ❌ 需付费 |
| 部署速度 | ⭐⭐⭐⭐⭐ 秒级 | ⭐⭐⭐ 分钟级 | ⭐⭐ 需手动 |
| CDN加速 | ✅ 全球CDN | ✅ GitHub CDN | ❌ 需自己配置 |
| 自动部署 | ✅ Git推送即部署 | ✅ 推送到gh-pages | ❌ 需CI/CD |
| 环境变量 | ✅ 支持 | ❌ 不支持 | ✅ 支持 |
| 自定义域名 | ✅ 免费SSL | ✅ 免费SSL | ✅ 需自己配置SSL |
| 框架支持 | ⭐⭐⭐⭐⭐ 智能识别 | ⭐⭐ 仅静态 | ⭐⭐⭐⭐ 任意 |
最大亮点:
- ✅ 零配置部署 - 自动识别Next.js、React、Vue等框架
- ✅ 全球CDN - 访问速度飞快
- ✅ 预览环境 - 每个PR都有独立预览URL
- ✅ 回滚机制 - 一键回退到任意历史版本
💡 我踩过的坑: 刚开始我用传统VPS部署前端,每次更新都要SSH登录、git pull、npm build、重启Nginx…烦不胜烦。换到Vercel后,只需git push,剩下的全自动!前置准备:你需要什么?
在开始之前,请确保你已经准备好:
必备条件
✅ 一个GitHub账号 ✅ 一个前端项目(React/Vue/Next.js等) ✅ 项目代码已推送到GitHub仓库 ✅ (可选)一个自己的域名 支持的前端框架
Vercel对以下框架有原生支持,可以零配置部署:
- Next.js - Vercel亲儿子,完美支持
- React (Create React App, Vite)
- Vue (Vue CLI, Vite)
- Angular
- Svelte
- Nuxt.js
- 纯静态HTML/CSS/JS
第一步:注册Vercel账号
1.1 访问Vercel官网
打开浏览器,访问 https://vercel.com
Vercel官网首页,点击右上角的"Sign Up"按钮
1.2 使用GitHub账号登录
强烈推荐使用GitHub账号登录,这样可以直接授权访问你的仓库,省去后续连接的麻烦。
点击 “Continue with GitHub”:
选择GitHub登录方式
1.3 授权Vercel访问GitHub
首次登录时,GitHub会要求你授权Vercel访问你的仓库。
授权范围: ✅ 读取仓库列表 ✅ 读取仓库代码 ✅ 添加部署状态(在PR中显示部署预览) 点击 “Authorize Vercel” 完成授权:
授权Vercel访问你的GitHub仓库
⚠️ 隐私说明: Vercel只会读取你主动导入的仓库,不会访问其他私有仓库。
第二步:导入GitHub项目到Vercel
2.1 进入项目导入页面
登录成功后,你会看到Vercel的Dashboard。点击 “Add New…” → “Project”:
Dashboard页面,点击添加新项目
2.2 选择要部署的仓库
Vercel会列出你GitHub账号下的所有仓库。找到你想部署的项目,点击 “Import”:
从GitHub仓库列表中选择项目
找不到你的仓库?
可能有以下原因:
❌ 仓库是私有的,但未授权Vercel访问 → 解决: 去GitHub Settings重新授权 ❌ 仓库属于Organization,需要额外授权 → 解决: 在Organization设置中授权Vercel ❌ 仓库名称被搜索框过滤了 → 解决: 清空搜索框或手动输入仓库名 2.3 配置项目设置
导入项目后,会进入配置页面。Vercel会自动检测你的项目类型和构建命令。
Vercel自动检测到的项目配置
核心配置项说明
1. Project Name (项目名称)
默认: 你的GitHub仓库名 用途: 决定默认的vercel域名 (如 my-app.vercel.app) 建议: 使用简洁、有意义的名称 2. Framework Preset (框架预设)
Vercel会自动识别你的框架:
| 检测到的框架 | 自动配置 |
|---|---|
| Next.js | Build: next build, Output: .next |
| Create React App | Build: npm run build, Output: build |
| Vite | Build: npm run build, Output: dist |
| Vue CLI | Build: npm run build, Output: dist |
💡 智能识别: Vercel会读取你的package.json来判断框架类型。3. Root Directory (根目录)
默认: ./ 用途: 如果你的前端代码在子目录(如monorepo),在这里指定 示例: monorepo-project/ ├── packages/ │ ├── frontend/ ← 前端代码在这里 │ └── backend/ └── package.json 配置: ./packages/frontend 4. Build Command (构建命令)
这是最重要的配置!Vercel会执行这个命令来构建你的项目。
常见框架的构建命令:
# Next.js next build # Create React Appnpm run build # Vite (React/Vue) vite build # 或npm run build # Vue CLI vue-cli-service build # 自定义脚本npm run build:prod 如何确认你的构建命令?
打开项目的package.json,查看scripts字段:
{"scripts":{"dev":"vite","build":"vite build", ← 这就是构建命令 "preview":"vite preview"}}在Vercel配置中填写: npm run build
5. Output Directory (输出目录)
构建完成后,静态文件的输出位置。
常见框架的输出目录:
| 框架 | 默认输出目录 |
|---|---|
| Next.js | .next |
| Create React App | build |
| Vite | dist |
| Vue CLI | dist |
| Angular | dist/<project-name> |
如何确认输出目录?
在本地运行构建命令:
npm run build 查看生成的文件夹名称,那就是输出目录!
6. Install Command (安装命令)
默认情况下,Vercel会自动检测并使用:
npm install(如果有package-lock.json)yarn install(如果有yarn.lock)pnpm install(如果有pnpm-lock.yaml)
通常不需要修改。
环境变量配置(可选)
如果你的项目需要环境变量(如API密钥、后端地址),在这里配置:
添加环境变量
示例:
Name: VITE_API_URL Value: https://api.example.com Name: VITE_APP_TITLE Value: My Awesome App 💡 提示:Vite项目的环境变量需要VITE_前缀Create React App项目需要REACT_APP_前缀Next.js项目需要NEXT_PUBLIC_前缀(如果要在客户端访问)
2.4 开始部署
配置完成后,点击底部的 “Deploy” 按钮:
点击Deploy按钮开始部署
第三步:等待构建和部署
3.1 构建过程实时日志
点击部署后,Vercel会显示实时构建日志:
实时构建日志,可以看到每一步的执行情况
构建流程:
1. Cloning repository ← 从GitHub克隆代码 2. Analyzing dependencies ← 分析依赖关系 3. Installing dependencies ← 安装npm包 (最耗时) 4. Building application ← 执行构建命令 5. Uploading build output ← 上传到CDN 6. Deploying to production ← 部署完成! 首次部署通常需要2-5分钟,取决于你的项目大小和依赖数量。
3.2 部署成功!
部署成功时会有个庆祝界面,恭喜,部署成功了! 🎉
部署成功页面,显示你的项目URL
你会得到一个默认域名,格式为:
https://your-project-name.vercel.app 立即访问测试!
点击 “Visit” 按钮,或者直接在浏览器中打开这个URL,看看你的项目是否正常运行。
3.3 部署失败?别慌,看日志!
如果部署失败,Vercel会显示详细的错误信息:
常见错误及解决方案:
错误1: Command "npm run build" exited with 1
原因: 构建命令执行失败 解决: 1. 检查package.json中的build脚本是否正确 2. 在本地运行`npm run build`看是否有错误 3. 检查是否缺少必要的环境变量 错误2: Error: Cannot find module 'xxx'
原因: 缺少依赖包 解决: 1. 确认依赖包在package.json的dependencies中(不是devDependencies) 2. 本地删除node_modules重新安装测试 3. 检查package-lock.json是否提交到GitHub 错误3: Build exceeded maximum duration of 45 minutes
原因: 构建超时(免费版限制45分钟) 解决: 1. 优化构建配置,减少不必要的依赖 2. 使用.vercelignore排除不需要的文件 3. 考虑升级到Pro版(300分钟限制) 错误4: FATAL ERROR: Reached heap limit
原因: Node.js内存不足 解决: 在项目根目录创建vercel.json: { "builds": [ { "src": "package.json", "use": "@vercel/node", "config": { "maxLambdaSize": "50mb" } } ] } 第四步:配置自动部署
部署成功后,最酷的功能来了:自动部署!
4.1 Git自动部署原理
工作流程: 你在本地修改代码 ↓ git commit & git push ↓ Vercel检测到GitHub仓库更新 ↓ 自动触发新的部署 ↓ 几分钟后新版本自动上线! 完全不需要手动操作!
第五步:配置自定义域名(进阶)
默认的vercel.app域名虽然能用,但不够专业。让我们配置一个自己的域名!
5.1 前置条件
✅ 你已经拥有一个域名(如从腾讯云、阿里云、GoDaddy购买) ✅ 能够访问域名的DNS管理后台 5.2 在Vercel中添加域名
进入项目的 Settings → Domains:
在Domains设置页面添加自定义域名
输入你的域名,如 blog.example.com,然后点击 “Add”。
Vercel会显示需要配置的DNS记录:
Vercel提供的DNS配置说明
两种域名类型:
类型1: 根域名(Apex Domain)
示例: example.com 需要配置: A记录: example.com → 76.76.21.21 类型2: 子域名(Subdomain)
示例: blog.example.com 或 www.example.com 需要配置: CNAME记录: blog → cname.vercel-dns.com 5.3 在腾讯云DNS配置域名解析
我以腾讯云DNSPod为例,演示配置过程。(阿里云、Cloudflare等平台操作类似)
步骤1: 登录腾讯云DNSPod
访问 https://console.dnspod.cn,登录后选择你的域名:
步骤2: 添加CNAME记录
点击 “添加记录”:
配置示例(子域名):
记录类型: CNAME 主机记录: blog (如果是www则填www) 记录值: 复制Vercel中添加的域名中的CNAME对应的Value指 TTL: 600 (10分钟,可以默认) 配置示例(根域名):
记录类型: A 主机记录: @ (@ 表示根域名) 记录值: 76.76.21.21 (Vercel提供的IP地址) TTL: 600 点击 “保存”。
步骤3: 等待DNS生效
DNS记录通常需要几分钟到几小时才能全球生效。
如何检查DNS是否生效?
在命令行中执行:
# 检查CNAME记录nslookup blog.example.com # 或使用dig命令dig blog.example.com # 应该看到返回:# blog.example.com. IN CNAME cname.vercel-dns.com.5.4 在Vercel中验证域名
回到Vercel的Domains设置页面,等待系统自动验证:
验证成功后,会显示:域名配置成功,自动启用HTTPS
Vercel自动提供:
- ✅ 免费SSL证书(Let’s Encrypt)
- ✅ 自动续期
- ✅ 强制HTTPS跳转
5.5 测试自定义域名
在浏览器中访问你的自定义域名:
https://blog.example.com 成功! 🎉
同时你还会发现:
- 默认域名
your-app.vercel.app仍然可用 - HTTP自动跳转到HTTPS
- 加载速度飞快(全球CDN加速)
第六步:项目管理和运维
6.1 查看部署历史
在项目的 Deployments 页面,可以看到所有的部署记录:
所有历史部署记录
每个部署都有:
- 唯一的URL
- 部署时间
- Git commit信息
- 构建日志
- 访问统计
6.2 一键回滚
如果新版本有问题,可以瞬间回退到任意历史版本:
回滚流程:
1. 找到你想回退到的版本 2. 点击右侧的 ⋯ 按钮 3. 选择"Promote to Production" 4. 几秒钟后,旧版本重新上线! 6.3 访问统计
在 Analytics 页面查看访问数据:
Vercel Analytics提供实时访问数据
免费版数据:
- 访问量(PV/UV)
- 地理分布
- 设备类型
- 浏览器类型
常见问题排查
Q1: 部署成功但页面404
问题现象:
访问首页: https://my-app.vercel.app ✅ 正常 访问子页面: https://my-app.vercel.app/about ❌ 404 原因: 前端路由(React Router/Vue Router)需要服务器配置支持。
解决方案:
在项目根目录创建vercel.json:
{"rewrites":[{"source":"/(.*)","destination":"/index.html"}]}这会将所有请求重定向到index.html,让前端路由接管。
Q2: 静态资源加载失败(404)
问题现象:
Console错误: GET https://my-app.vercel.app/assets/logo.png 404 原因: 静态资源路径配置错误。
解决方案:
Vite项目:
修改vite.config.js:
exportdefault{base:'/',// 确保base是 '/' 而不是相对路径build:{outDir:'dist',}}Create React App:
修改package.json:
{"homepage":"https://my-app.vercel.app"}Q3: 环境变量未生效
问题现象:
console.log(import.meta.env.VITE_API_URL)// 输出: undefined排查清单:
❌ 环境变量名称错误(缺少前缀) → Vite: 必须以VITE_开头 → CRA: 必须以REACT_APP_开头 → Next.js: 必须以NEXT_PUBLIC_开头(客户端使用) ❌ 环境变量未在Vercel中配置 → 进入Settings → Environment Variables添加 ❌ 配置后未重新部署 → 修改环境变量后需要触发新部署才能生效 Q4: 构建时间过长
优化策略:
1. 使用.vercelignore排除不必要文件
创建.vercelignore:
.git *.md .vscode .idea tests docs 2. 启用依赖缓存
Vercel默认会缓存node_modules,但可以优化:
// vercel.json{"github":{"silent":true},"build":{"env":{"NODE_OPTIONS":"--max_old_space_size=4096"}}}3. 并行构建
如果是monorepo,可以配置并行构建:
{"builds":[{"src":"package.json","use":"@vercel/static-build","config":{"parallel":3}}]}Q5: 自定义域名HTTPS证书错误
问题现象:
浏览器显示"您的连接不是私密连接"。
解决步骤:
1. 检查DNS是否生效 (nslookup your-domain.com) 2. 在Vercel中删除域名,重新添加 3. 等待几分钟让Let's Encrypt重新签发证书 4. 清除浏览器缓存和SSL状态 进阶技巧
技巧1: 使用Vercel CLI本地开发
安装Vercel CLI:
npm i -g vercel 在本地模拟Vercel环境:
# 链接到Vercel项目 vercel link# 下载环境变量 vercel env pull # 本地运行(使用生产环境配置) vercel dev 优势:
✅ 本地使用Vercel的环境变量 ✅ 模拟Vercel的Serverless Functions ✅ 测试rewrite/redirect规则 技巧2: 配置多域名
一个项目可以绑定多个域名:
example.com → 主域名 www.example.com → 自动跳转到主域名 blog.example.com → 独立访问 在Vercel Domains设置中添加多个域名即可。
技巧3: 自定义构建缓存
优化构建速度:
// vercel.json{"build":{"env":{"ENABLE_EXPERIMENTAL_COREPACK":"1","NEXT_PRIVATE_CACHE_HANDLER":"1"}},"crons":[{"path":"/api/clear-cache","schedule":"0 0 * * *"}]}技巧4: 配置Redirect规则
SEO优化和URL管理:
{"redirects":[{"source":"/old-blog/:slug","destination":"/blog/:slug","permanent":true},{"source":"/docs","destination":"/documentation","permanent":false}]}技巧5: 配置HTTP Headers
安全和性能优化:
{"headers":[{"source":"/(.*)","headers":[{"key":"X-Frame-Options","value":"DENY"},{"key":"X-Content-Type-Options","value":"nosniff"},{"key":"Cache-Control","value":"public, max-age=31536000, immutable"}]}]}成本和限制
Hobby(免费)计划
✅ 无限项目 ✅ 无限部署 ✅ 100GB带宽/月 ✅ 1000次Serverless Function调用/天 ✅ 自动SSL证书 ✅ 全球CDN ❌ 团队协作(仅限个人) ❌ 商业使用 Pro计划($20/月)
+ Hobby所有功能 + 1TB带宽/月 + 无限Serverless调用 + 团队协作(无限成员) + 优先级支持 + 密码保护 + 分析和日志保留更长 什么时候需要升级Pro?
✅ 月访问量超过100GB带宽 ✅ 需要团队协作开发 ✅ 需要密码保护预览环境 ✅ 需要更详细的访问分析 对于个人项目和小型网站,免费计划完全够用!
总结:Vercel部署检查清单
部署前检查
✅ 代码已推送到GitHub ✅ package.json中的dependencies正确 ✅ 本地执行npm run build成功 ✅ 构建产物在正确的输出目录 ✅ 环境变量整理完毕 ✅ .gitignore包含node_modules和构建产物 部署配置检查
✅ Framework Preset正确识别 ✅ Build Command配置正确 ✅ Output Directory配置正确 ✅ Root Directory配置正确(如果不是根目录) ✅ Environment Variables添加完整 部署后检查
✅ 首页能正常访问 ✅ 前端路由跳转正常(多页应用) ✅ 静态资源加载正常 ✅ API请求正常(如果有后端) ✅ 环境变量生效 ✅ 移动端响应式正常 自定义域名检查
✅ DNS记录配置正确 ✅ DNS已生效(nslookup检查) ✅ Vercel中域名验证成功 ✅ HTTPS证书自动签发 ✅ HTTP自动跳转HTTPS ✅ www和非www都能访问(如果需要) 下一步行动
今天就开始:
- 注册Vercel账号
- 选择一个项目进行部署
- 配置自动部署
- (可选)绑定自定义域名
本周任务:
- 将所有前端项目迁移到Vercel
- 配置PR预览环境
- 优化构建配置
- 设置性能监控
长期优化:
- 使用Vercel Analytics分析用户行为
- 根据Web Vitals优化性能
- 探索Serverless Functions(Vercel的后端能力)
- 学习Vercel的Edge Functions(边缘计算)
相关资源
官方文档:
社区资源:
对比参考:
从今天开始,让你的前端项目走出本地,面向世界!记住:部署不是结束,而是你的项目真正开始被使用的起点。
现在就行动,10分钟后,你的作品将拥有一个全球可访问的URL! 🚀
这篇文章对你有帮助吗?分享你的Vercel部署经验,或者在评论区提问!
