十分钟搞定Vue2项目双平台部署：GitHub Pages+Vercel配置详解

当你用@vue/cli5构建的Vue2项目在本地运行完美，但部署到GitHub Pages或Vercel上发现页面空白... 问题出在哪？

本文将手把手教你同一套代码适配两大平台，解决静态资源路径这一核心问题。

前置准备

环境要求 ：
- @vue/cli 5.x, vue 2.x
- GitHub账号/Vercel账号

核心部署步骤
1. 对比双平台的publicPath差异（GitHub Pages需子路径，Vercel需根路径），动态配置静态资源路径
  - 关键配置 ：
    - 修改vue.config.js
    javascript 复制代码
```
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: (() => {
    if (process.env.NODE_ENV === 'production') {
      if (process.env.DEPLOY_TARGET === 'github-pages') {
        return '/weather-app/'
      } else if (process.env.DEPLOY_TARGET === 'vercel') {
        return '/'
      }
    }
    return '/' // 默认开发环境
  })()
})
```
2. GitHub Pages适配
  - 自动化部署脚本
    - 添加deploy.sh脚本
    sh 复制代码
```
#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 强制推送 dist 文件夹的内容到 gh-pages 分支
git push -f [email protected]:<USERNAME>/<REPO>.git HEAD:gh-pages

# 返回到项目根目录
cd -
```
    - 在package.json中添加deploy命令
    json 复制代码
```
{
    // ...,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "deploy": "DEPLOY_TARGET = github-pages bash deploy.sh"
      },
    // ...
}
```
    - 运行: npm run deploy
    - 启用 GitHub Pages
      - 进入你的 GitHub 仓库页面。
      - 点击 "Settings" 选项卡。
      - 在左侧边栏中，找到 "Code and automation" 部分，点击 "Pages"。
      - 在 "Source" 部分，选择 "Branch"。
      - 在下拉菜单中选择 gh-pages 分支。
      - 点击 "Save"。
      GitHub Pages 会开始构建并部署你的网站。通常，几分钟后你就可以通过 https://<USERNAME>.github.io/<REPO_NAME> 访问你的网站了。
3. Vercel适配
  - 部署流程 （通过Vercel CLI关联Git仓库自动部署）
    1. 登录 Vercel (vercel.com)
    2. 点击 "New Project"
    3. 选择你的 GitHub 仓库
    4. 配置设置：
      - Framework Preset: Vue.js
      - Build Command: DEPLOY_TARGET = vercel npm run build
      - Output Directory: dist
    5. 点击 Deploy
4. 效果验证与调试
  - GitHub Pages ：
    - 访问 https://username.github.io/repo-name
    - 检查Chrome开发者工具Network面板，确认资源加载无404。
  - Vercel ：
    - 访问自动生成的vercel.app域名，确认资源加载无404。