十分钟搞定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。
相关推荐
编程猪猪侠19 分钟前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
江城开朗的豌豆38 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
HelloGitHub1 小时前
从被喷“假开源”到登顶 GitHub 热榜,这个开源项目上演王者归来!
开源·github
江城开朗的豌豆1 小时前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
wuk99810 小时前
基于MATLAB编制的锂离子电池伪二维模型
linux·windows·github
幽络源小助理11 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
ai小鬼头12 小时前
AIStarter如何助力用户与创作者?Stable Diffusion一键管理教程!
后端·架构·github
天天扭码12 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github
鱼樱前端13 小时前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder14 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github