Githup Pages 部署前端项目（Vue3为例）

step1: 创建 githup 仓库

step2: 创建vue项目

执行命令创建项目，并推送到刚刚创建好的vuepages仓库上

vue create vuepages

setp3: 打开vuepages项目，安装gh-pages插件并在package.json文件中添加脚本命令

yarn add gh-pages -D

"scripts": {

...

"predeploy": "npm run build",

"deploy": "gh-pages -d dist -r git@github.com:aysuqi/vuepage.git -b gh-pages"
}

"deploy": "gh-pages -d dist -r 你的仓库地址 -b 分支名称"

setp4: 执行脚本命令，创建分支并打包项目及部署,到看到Published说明项目以及成功执行了

yarn deploy

setp5: 回到githup上的仓库可以看到仓库上多了一个gh-pages的分支并进入该分支（该分支是用来部署项目的包）

setp6: 选择gh-pages，查看项目地址

到此就完成了项目的部署

Githup项目地址：github.com/aysuqi/vuep…

在线预览地址：aysuqi.github.io/vuepage/

如果该文章对您有所帮助请您点点赞，您的支持是最大动力，谢谢！！！