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
        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
  3. 效果验证

    • GitHub Pages
      • 访问 https://username.github.io/repo-name
      • 检查资源加载(Chrome开发者工具 > Network)
    • Vercel
      • 访问自动生成的vercel.app域名
相关推荐
菜鸟una4 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
桃子不吃李子5 小时前
nextTick的使用
前端·javascript·vue.js
想学全栈的菜鸟阿董5 小时前
Crew连接多个 MCP 服务器
运维·服务器·github
想学全栈的菜鸟阿董5 小时前
通过 Stdio(标准输入/输出)传输机制,实现 CrewAI 与本地 MCP 服务器的连接
运维·服务器·github
小二·7 小时前
从零开始:使用 Vue-ECharts 实现数据可视化图表功能
vue.js·信息可视化·echarts
前端 贾公子7 小时前
Element Plus组件v-loading在el-dialog组件上使用无效
前端·javascript·vue.js
qq_419854057 小时前
自定义组件(移动端下拉多选)中使用 v-model
前端·javascript·vue.js
你的电影很有趣7 小时前
lesson74:Vue条件渲染与列表优化:v-if/v-show深度对比及v-for key最佳实践
前端·javascript·vue.js
Onlyᝰ9 小时前
前端tree树
javascript·vue.js·elementui
星光不问赶路人9 小时前
彻底清理 Git 分支:从查看到批量删除无效分支的全流程指南
git·github