Vue 项目打包部署到GitHub Pages教程

Vue 项目打包部署到GitHub Pages教程

前言

日常学习过程中我们常常会写demo,但是光写没有地方展示效果,多少有些写了白写的感觉。那么选择github pages 来展示我们的demo项目是一个很好的选择。

为什么选择 github pages呢?

  • 搭建简单而且免费;
  • 支持静态脚本;
  • 可以绑定你的域名;
  • DIY自由发挥,动手实践一些有意思的东西git,markdown,bootstrap,jekyll;
  • 理想写博环境,git+github+markdown+jekyll;

前置准备

  1. 安装 git工具, 前往git官网,根据自己的电脑下载安装。
  2. 打开 VScode 中的源代码管理器,配置Git用户名和电子邮箱。

快速创建仓库

如果你已经做好前置准备了,并且已经在本地创建了一个项目,那么打开VScode的源代码管理器,选择直接发布到GitHub即可。

github上创建仓库

首先我们需要前往 github 官网, 点击 New repository 创建新项目. 填入项目基本信息, 点击 Create Repository 确认。注意:项目必须是public的。

然后将本地项目与远程仓库连接起来。网上有很多类似教程,这里就不一一说明。

打包部署

以 Vue3 + Vite项目为例,使用npm run build将项目打包。此时,项目结构如图,dist是打好的包,node-modules是下载的依赖。因为.gitignore文件,这两个文件夹无法被提交到git上,所以需要将里面的dist注释掉。

然后我们需要将dist包里的文件全部提交到仓库的另一个分支里。输入命令行:

css 复制代码
// git subtree push --prefix dist origin [自定义分支名称]
 git subtree push --prefix dist origin gh-pages

然后我们就能在github上看到另一分支。然后打开setting,找到Pages。将source配置修改为新分支并保存。刷新等待部署成功(需要一些时间,可以多刷下几次)

更新项目,重新打包部署

  1. 重新打包生成dist文件夹,输入指令切换到gh-pages分支。
  2. 进入dist目录:cd dist
  3. 添加dist文件夹中的文件:git add . -f
  4. 执行提交命令:git commit -a -m "update"
  5. 返回上层目录:cd ..
  6. 执行推送命令:git subtree push --prefix=dist origin gh-pages

遇到的问题

部署完打开是一片空白

解决:修改vite.config.js文件。添加base

js 复制代码
export default defineConfig({
    base: './',
    pulign:[vue()]
})

参考文章:

【1】github pages gitee pages 配置教程、更新教程(亲测有效)

【2】项目打包部署到github的GitHub Pages(静态网页)

相关推荐
上单带刀不带妹15 分钟前
JavaScript 中的宏任务与微任务
开发语言·前端·javascript·ecmascript·宏任务·微任务
网安Ruler16 分钟前
Web开发-PHP应用&TP框架&MVC模型&路由访问&模版渲染&安全写法&版本漏洞
前端·php·mvc
AI视觉网奇43 分钟前
音频获取长度
java·前端·python
Albert_Lsk1 小时前
【2025/08/01】GitHub 今日热门项目
人工智能·开源·github·开源协议
小喷友1 小时前
第 6 章:API 路由(后端能力)
前端·react.js·next.js
shilim1 小时前
这位老哥提交了一个12万行代码的PR,程序员看了都说LGTM
人工智能·github·代码规范
像素之间1 小时前
elementui中rules的validator 用法
前端·javascript·elementui
小高0071 小时前
🚀把 async/await 拆成 4 块乐高!面试官当场鼓掌👏
前端·javascript·面试
CF14年老兵2 小时前
SQL 是什么?初学者完全指南
前端·后端·sql
大前端之旅2 小时前
探索 DCloud 的技术生态:uniapp的跨平台开发宝藏
github