十分钟搞定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。
相关推荐
婉婉耶9 分钟前
VUE带你乘风破浪~
前端·vue.js
橘黄的猫9 分钟前
深入浅出掌握 Git 子模块:项目管理利器
前端·github
乌兰麦朵1 小时前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Goodbaibaibai1 小时前
创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目
javascript·vue.js·typescript
流星稍逝1 小时前
用vue3的写法结合uniapp在微信小程序中实现图片压缩、调整分辨率、做缩略图功能
前端·vue.js
OEC小胖胖1 小时前
深入理解 Vue.js 响应式原理及其在 Web 前端开发中的应用
开发语言·前端·javascript·vue.js·web
拾光拾趣录2 小时前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
雲墨款哥2 小时前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
独立开阀者_FwtCoder2 小时前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder2 小时前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端