为什么你的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实现一键发布。