十分钟搞定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。
相关推荐
lichong95123 分钟前
Git 检出到HEAD 再修改提交commit 会消失解决方案
java·前端·git·python·github·大前端·大前端++
不想上班只想要钱1 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
雲帝2 小时前
github断开Fork关系
github
222you2 小时前
Git仓库推送到GitHub
git·github
岁月宁静2 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
你的人类朋友4 小时前
hotfix分支的使用
git·gitlab·github
533_5 小时前
[vue] dayjs 显示实时时间
前端·javascript·vue.js
武天6 小时前
Vue项目中有封装过axios吗?怎么封装的?
vue.js
jiangzhihao05157 小时前
升级到webpack5
前端·javascript·vue.js
云雾J视界7 小时前
开源协作2.0:GitHub Discussions+AI重构开发者社区的知识共创生态
人工智能·开源·github·discussions·知识共创·社区知识·ai重构