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

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

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

  1. 前置准备
  • 环境要求
    • @vue/cli 5.x, vue 2.x
    • GitHub账号/Vercel账号
  1. 核心部署步骤
    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 git@github.com:<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。
相关推荐
ikun778g1 小时前
uniapp设置安全区
前端·javascript·vue.js·ui·uni-app
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 22 - Computed:缓存机制实现
javascript·vue.js
xiaoyan20152 小时前
2025最新款Electron38+Vite7+Vue3+ElementPlus电脑端后台系统Exe
前端·vue.js·electron
梅孔立2 小时前
本地多版本 Node.js 切换指南:解决 Vue nodejs 等项目版本冲突问题
前端·vue.js·node.js
Grassto2 小时前
免费的 CI/CD 服务,了解一下 GitHub Actions ?
ci/cd·github·github actions
爱泡脚的鸡腿3 小时前
VUE移动端项目跟练2(简洁易懂)
前端·javascript·vue.js
DeepHacking3 小时前
GitHub代码推送指南
github
破坏的艺术3 小时前
GitHub Spec Kit:官方规格驱动开发工具包深度解析
github·vibe coding
小狮子安度因3 小时前
FFmpeg-vflip滤镜使用
vue.js·ffmpeg·myeclipse
古夕3 小时前
技术复盘文档:解决 `watchEffect` 导致的图片闪烁无限循环问题
前端·javascript·vue.js