10分钟搞定Vite项目部署：从开发到上线(GitHub Pages+Vercel)全流程

• 当你用Vite构建的Vue3项目在本地飞速运行，但部署到GitHub Pages或Vercel上却白屏... 问题根源是什么？"
• 本文将详解Vite项目的多平台部署配置差异，提供'一次配置，双平台兼容'的解决方案。

1. 前置准备

   • 环境要求 ：
     • Vite 4+ / Vue 3.x

2. 核心部署步骤

   1. 对比双平台的base差异（GitHub Pages需子路径，Vercel需根路径），动态配置静态资源路径

      • 关键配置

        • 修改vite.config.js：

        import { defineConfig } from 'vite'
        import vue from '@vitejs/plugin-vue'
        
        const isGitHubPages = process.env.DEPLOY_TARGET === 'github-pages'
        const base = isGitHubPages ? '/vue-todo-list/' : '/'
        
        export default defineConfig({
          plugins: [vue()],
          base
        })

   2. GitHub Pages 适配

      • 自动化部署 (使用gh-pages一键推送)：

        • 安装gh-pages：

        npm install gh-pages --save-dev

        • 在package.json中添加deploy命令

        // package.json
        {
            // ...,
            "scripts": {
                "dev": "vite",
                "build": "vite build",
                "preview": "vite preview",
                "deploy": "DEPLOY_TARGET=github-pages npm run build && gh-pages -d dist"
            },
            // ...
        }

        • 运行：npm run deploy

   3. Vercel 适配

      • 部署流程 （通过Vercel CLI关联Git仓库自动部署）
        1. 登录 Vercel (vercel.com)
        2. 点击 "New Project"
        3. 选择你的 GitHub 仓库
        4. 配置设置：
           • Framework Preset: Vite
           • Build Command: npm run build
           • Output Directory: dist
        5. 点击 Deploy

3. 效果验证

   • GitHub Pages ：
     • 访问 https://username.github.io/repo-name
     • 检查资源加载（Chrome开发者工具 > Network）
   • Vercel ：
     • 访问自动生成的vercel.app域名