为什么你的Vue2项目部署后出现空白页？
当使用@vue/cli5构建的Vue2项目在本地运行完美，部署到GitHub Pages或Vercel却遭遇空白页面时，静态资源路径配置往往是罪魁祸首。本文将揭秘同一套代码适配两大平台的完整方案，助你10分钟攻克部署难题。
一、部署前准备工作
1.1 项目基础配置检查
确保vue.config.js已创建
验证Node.js版本≥14.0
安装最新版@vue/cli（建议5.0+）
1.2 关键文件配置
vue.config.js核心配置：
```javascript
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/your-repo-name/' : '/',
outputDir: 'dist',
assetsDir: 'static'
}
```注意：此处/your-repo-name/需替换为你的GitHub仓库名称
二、GitHub Pages部署指南
2.1 自动化部署流程
1. 创建gh-pages分支
2. 在项目根目录执行：
```bash
npm install gh-pages --save-dev
```3. 修改package.json：
```json
"scripts": {
"deploy": "gh-pages -d dist"
}
```4. 执行部署命令：
```bash
npm run build && npm run deploy
```2.2 GitHub设置关键步骤
1. 进入仓库 → Settings → Pages
2. 选择gh-pages分支作为发布源
3. 设置自定义域名（可选）
4. 等待约2分钟完成首次部署
三、Vercel极速部署方案
3.1 一键式部署
1. 登录Vercel官网
2. 导入GitHub仓库
3. 配置关键参数：
```env
Build Command: npm run build
Output Directory: dist
```4. 启用自动SSL证书
3.2 高级配置技巧
自定义环境变量配置
路由重定向规则设置
多环境部署（开发/测试/生产）
四、双平台部署对比
| 特性 | GitHub Pages | Vercel |
|---|---|---|
| 部署速度 | 2到5分钟 | 即时部署 |
| 自定义域名 | 支持 | 免费SSL |
| 访问速度 | 全球CDN | 边缘网络加速 |
五、常见问题解决方案
5.1 资源404错误
解决方法：
```javascript
// vue.config.js
publicPath: process.env.BASE_URL
```5.2 路由失效问题
使用history模式时需配置fallback
在Vercel中创建vercel.json：
```json
{
"rewrites": [{ "source": "/(.)", "destination": "/index.html" }]
}
```六、部署验证与监控
1. 使用curl -I your-domain检查状态码
2. 配置GitHub Actions自动化测试
3. 接入Sentry错误监控系统
4. 配置Vercel性能分析面板
实战技巧：
同时部署双平台只需在.github/workflows中添加：
```yaml
name: Deploy to Vercel
uses: amondnet/vercel-action@v20
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }}
```通过本文的详细指南，你已经掌握了Vue2项目在GitHub Pages和Vercel的部署精髓。无论选择哪个平台，核心都在于正确的静态资源配置和自动化流程搭建。建议首次部署时严格按步骤操作，后续可通过CI/CD实现一键发布。
正文完
