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

小七_雪球2025-04-16 16:22

当你用Vite构建的Vue3项目在本地飞速运行，但部署到GitHub Pages或Vercel上却白屏... 问题根源是什么？"

本文将详解Vite项目的多平台部署配置差异，提供'一次配置，双平台兼容'的解决方案。

前置准备
- 环境要求 ：
  - Vite 4+ / Vue 3.x
核心部署步骤
1. 对比双平台的base差异（GitHub Pages需子路径，Vercel需根路径），动态配置静态资源路径
  - 关键配置
    - 修改vite.config.js：
    javascript 复制代码
```
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：
    bash 复制代码
```
npm install gh-pages --save-dev
```
    - 在package.json中添加deploy命令
    json 复制代码
```
// 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
效果验证
- GitHub Pages ：
  - 访问 https://username.github.io/repo-name
  - 检查资源加载（Chrome开发者工具 > Network）
- Vercel ：
  - 访问自动生成的vercel.app域名