Vue 项目打包部署到GitHub Pages教程
前言
日常学习过程中我们常常会写demo，但是光写没有地方展示效果，多少有些写了白写的感觉。那么选择github pages 来展示我们的demo项目是一个很好的选择。
为什么选择 github pages呢？
- 搭建简单而且免费；
- 支持静态脚本；
- 可以绑定你的域名；
- DIY自由发挥，动手实践一些有意思的东西git,markdown,bootstrap,jekyll；
- 理想写博环境，git+github+markdown+jekyll；
前置准备
- 安装 git工具， 前往git官网，根据自己的电脑下载安装。
- 打开 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配置修改为新分支并保存。刷新等待部署成功（需要一些时间，可以多刷下几次）
更新项目，重新打包部署
- 重新打包生成dist文件夹，输入指令切换到
gh-pages分支。 - 进入dist目录：
cd dist - 添加dist文件夹中的文件：
git add . -f - 执行提交命令：
git commit -a -m "update" - 返回上层目录：
cd .. - 执行推送命令：
git subtree push --prefix=dist origin gh-pages
遇到的问题
部署完打开是一片空白
解决：修改vite.config.js文件。添加base。
js
export default defineConfig({
base: './',
pulign:[vue()]
})参考文章：