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

相关推荐
轻口味22 分钟前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王1 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发1 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀1 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪2 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef4 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6414 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
sdaxue.com4 小时前
帝国CMS:如何去掉帝国CMS登录界面的认证码登录
数据库·github·网站·帝国cms·认证码
m0_748247554 小时前
github webhooks 实现网站自动更新
github