在进行GitHubPages和Vercel双部署时，要小心publicPath/base设置不当导致前功尽弃。

许多开发者都遇到过这样的困境：精心完成的项目在本地运行完美，却在使用GitHub Pages和Vercel双部署时遭遇连环翻车。当你在两个平台看到截然不同的报错提示——CSS加载失败、资源路径404、页面样式错乱，问题的根源往往指向同一个关键配置：publicPath（或base路径）。

场景A：GitHub Pages正常访问，Vercel部署后main.css加载失败
场景B：Vercel运行完美，GitHub Pages却显示空白页面
控制台报错特征：Failed to load resource (404)

GitHub Pages默认部署在https://<username>.github.io/<repo-name>/这样的二级路径下，这意味着：

必须设置publicPath: '/repo-name/'
所有静态资源路径需要自动添加项目名前缀

Vercel的每个部署都拥有独立域名（或根路径），因此：

必须使用publicPath: '/'
绝对路径写法会导致资源加载失败

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'github' 
    ? '/your-repo-name/' 
    : '/'
}

// vite.config.ts
export default defineConfig({
  base: process.env.DEPLOY_ENV === 'github' 
    ? '/repo-name/' 
    : '/'
})

GitHub Actions部署时注入DEPLOY_ENV=github
Vercel部署保持默认环境变量
本地开发设置publicPath: '/'

name: Deploy
on: [push]
jobs:
  github-pages:
    runs-on: ubuntu-latest
    steps:
      uses: actions/checkout@v3
      run: DEPLOY_ENV=github npm run build
      uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

  vercel-deploy:
    runs-on: ubuntu-latest
    steps:
      uses: actions/checkout@v3
      run: npm run build
      uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}