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(静态网页)

相关推荐
安冬的码畜日常1 分钟前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中6 分钟前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
Gladiator5758 分钟前
博客记录-day151-面试+力扣
github
清风细雨_林木木10 分钟前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师33 分钟前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚38 分钟前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧41 分钟前
HTML字符实体和转义字符串
前端·html
小希爸爸1 小时前
2、中医基础入门和养生
前端·后端
局外人LZ1 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
G_GreenHand1 小时前
Dhtmlx Gantt教程
前端