vue项目部署gitHub教程，如何创建github服务器

待我称王封你为后i 2023-09-24 09:01 129阅读 0赞

本文章根据官方流程及个人经验整理成以下步骤：

官方步骤：https://pages.github.com/

第一步，先创建一个代码版本库(仓库)，仓库名称username.github.io 的格式，注意：username是你的用户名，图中我的已经创建过了，所以不能再创建了，然后点击create repository 创建

![这里写图片描述][SouthEast]

第二步，克隆仓库到本地，https://github.com/username/username.github.io

注意：username是你的用户名，当你创建成功会给你一个地址，直接复制就行。

我是tortoisegit克隆仓库，因为方便不用命令操作，

【tortoisegit下载地址：https://tortoisegit.org/download/】

【命令行操作git教程地址：点击此处】

第三步，将完成好的vue项目进行打包，命令行输入 npm run build

查看打包教程

第四步，打包好会在你的项目中出现一个dist的文件夹，里面有static文件夹和index.html文件，把这两个复制或剪切到克隆出来的文件夹下

![这里写图片描述][SouthEast 1]

右击 commit 就行了

![这里写图片描述][SouthEast 2]

注意：一定是index.html

第五步，在浏览器输入，http://username.github.io

注意：username是你的用户名，不过这个还有些问题，毕竟不是服务器，打开的时候会很卡，vue写百度地图可能不显示，暂时还没解决，正在研究中，如有解决了的童鞋，可以分享一下！

[SouthEast]: https://img-blog.csdn.net/20170926164956365?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzg5MDM5NTA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: https://img-blog.csdn.net/20170926171856857?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzg5MDM5NTA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 2]: https://img-blog.csdn.net/20170926172115494?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzg5MDM5NTA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast