github pages gitee pages 配置教程、更新教程（亲测有效），gitee pages 访问界面为空白，样式和js文件404问题解决（亲测有效）

github pages gitee pages 配置教程、更新教程（亲测有效），gitee pages 访问界面为空白，样式和js文件404问题解决（亲测有效）

github部署vue打包项目通过 https://用户名.github.io/项目名 进行访问

gitee部署vue打包项目通过 https://用户名.gitee.io/项目名 进行访问

push时经常会报errno 10054错误，个人觉得是由于有些时候访问不了github网站导致的，重新或多次执行push即可

以本项目vue-element-data为例

01.前提要求

1.已在github上传开源项目并进行提交

2.项目打包后的dist文件夹中确保index.html可以正常访问

3.确保所在项目vue-element-data文件夹中已配置好git可以正常上传代码

02.创建与默认分支并列的gh-pages分支

1.在vue-element-data目录下文件中右键找到Git Base Here并输入

git subtree push --prefix=dist origin gh-pages

2.查看命令行是否报错以及查看github是否成功创建gh-pages分支

3.创建成功的情况如下图所示

03.如果命令行报错或github没有该分支的情况下

1.命令行查看gh-pages分支是否存在

git branch -a

红色为远程分支、绿色为当前分支
情况一：对gh-pages分支进行多次增加
情况二：对gh-pages分支多次删除
情况三：会报其他错误：没有权限、该分支已存在、该分支无法进行其他操作

2.除了SSH需要配置其他操作都执行删除gh-pages分支后再次执行步骤2即可（远程、本地都需要删除）

删除远程分支指令

git push origin --delete gh-pages

删除本地分支执行

git branch -D gh-pages 

3.配置权限

点击头像展示的下拉框中选择settings
点击SSH and GPG keys
点击New SSH key
官方配置教程
配置完成后再重新步骤2再次创建gh-pages分支即可

04.命令git subtree push --prefix=dist origin gh-pages执行成功后

1.找到分支gh-pages并查看该分支下的文件

如上图所示这里的文件项目打包文件夹（dist）中的文件

2.找到settings中的Pages如下图所示

如上图所示打开该项目地址即可
示例：https://lufaliu.github.io/vue-element-data/
证明配置成功！

05.对分支gh-pages的文件进行更新

1.先提交已修改的代码

2.对项目进行打包

3.切换到分支gh-pages

打开Git Bash Here
默认在当前主分支（main）
输入指令切换到gh-pages分支，如下所示

git switch gh-pages

有些是否会提示该目录有未提交的文件，如下图所示

这个提示是因为该文件未进行提交所引起的，不过这些文件通常的我们不需要用到的文件，
这个时候我们只需要将这些文件添加到.gitignore后，提交代码后再重新执行 git switch gh-pages
命令

4.执行更新步骤

1.cd 到目录dist 如下图所示

2.执行指令添加dist文件夹中的文件

git add . -f

3.执行如下指令

git commit -a -m "update gh-pages"

如上图所示表示已成功提交已修改的文件

4.返回上一层（指令：cd …）到项目目录下（这里为vue-element-data），然后执行如下指令更新到github

git subtree push --prefix=dist origin gh-pages

如上图所示配置成功
切换到gh-pages分支，如下图所示

这个时候提交时的信息出现在如图所示位置则表示提交成功

5.查看pages中的链接（验证内容是否更新，需清理缓存）
示例：https://lufaliu.github.io/vue-element-data/
目前遇到添加element loading提交到gh-pages后无效

5.先查看github的链接然后再gitee的链接

本项目遇到gitee链接存在（缓存问题），界面效果并没有那么快更新
gitee 更新gh-pages目录后一定要到Gitee Pages 服务中进行更新（不进行更新会导致访问界面变空白，样式和js文件404）如下图所示

注意：更新过程中gitee链接访问为404（更新时间无法评估，存在超过8分钟的情况）

6.切换回主分支

需要切换会主分支（main），在本地启动时才会是最新的效果，如果没有切换会导致内容是（上一版）的内容

06.踩的坑

1.切换分支前先对主分支的代码进行提交，提交后在执行git switch gh-pages，执行后文件目录如下图所示

这里依旧存在着在主分支打包的dist文件夹

但是这个文件夹存在问题（里面的内容是旧的文件地址引用），建议在主分支打包的dist文件夹拷贝一份出来，切换分支后再覆盖上图的dist文件夹

2.在gh-pages分支下执行commit指令出现这种错误，如下图所示

经过测试，将主分支备份出来的dist文件夹覆盖切换了gh-pages分支后的文件夹该错误可以避免

3.打包后界面出现空白的情况

建议：在打包为dist文件时打开index.html进行验证，如出现空白界面那就证明配置不准确
这里给出本项目配置项（亲测可用）：
router.js

vue.config.js

主要配置参数为：router.js=>去掉mode、vue.config.js=>publicPath的配置

注意

1.提交时遇到git On branch gh-pages nothing to commit, working tree clean，具体原因是因为没有修改文件

2.目前遇到修改了css样式/去掉图片文件或文件夹也会提示git On branch gh-pages nothing to commit, working tree clean

3.建议修改其他文件，在git add . -f 时如有修改文件会出现你已修改的文件（2为例外），这个时候提交就不会出现该错误

4.遇到提交到github报（errno 10054）(21123 ms: Timed out) 类似这些错误时，再次提交直到成功为止

5.提交更新到gh-pages后发现界面没有更新时执行git push origin :gh-pages删除分支，再按05-2步骤进行再次推送

6.gitee 更新gh-pages目录后一定要到Gitee Pages 服务中进行更新，否则访问界面变空白，样式和js文件404