**如何部署vue项目到github上？**

如何部署vue项目到github上？
最近发现有很多小伙伴对于把vue项目部署到github上不太了解。不知道怎么办？虽然我也是菜鸟，从各个博客借鉴的总结如下：
很多小伙伴在使用 vue-cli 脚手架工具构建自己的第一个 vue 项目后，想把它上传到 github 并展示一下预览效果。

这里假设你也是和我一样使用了 vue-cli 搭建了自己的项目，并且项目也已经上传到了 github。如果使用的vue-cli 2.x 在里面有webpack配置文件，而3.x以上 webpack配置文件就被隐藏了。我是使用的3.x+

当我们运行了npm run build 命令经过webpack打包后，会在根目录下生成dist目录，
dist目录下有index.html,和css文件 ，js文件
我们尝试打开一下index.html

为什么会是空白页呢？打开控制台，会发现路径不对，不应该是‘/’路径而是‘./’。
是哪里出了问题呢？其实就是webpack的路径配置问题。
路径这个地方就是我踩坑的地方，因为我用的vue/cli4.5+,所以webpack配置文件被隐藏了，只能自己创建一个webpack.config.js文件。配置如图：
路径只需更改publicPath属性为‘./’就可以了。
然后重新npm run build打包一下，看看本地是否能正常运行，如果可以就上传到github上。自己总结的葵花宝典如图：
上传过后：
或许有朋友发现上传的文件中没有dist目录，我们找到项目根目录的 .gitignore 文件，这里设置一些文件名，对应的文件将不会被提交到 github 上面，而 dist 被设置在里面，所以就不能上传到 github 上了，我们可以把 dist 从文件里移除。
再重新打包提交到github上。就有dist目录了。
现在还不能实现项目的线上预览效果，点击项目的 setting 项，然后找到 Github Pages。
选择 master branch ，保存，接着你会看到项目在线预览链接，点击链接。此时，你会看到页面一片空白，别急，在地址栏后面添加 dist （因为 index.html 是在 dist目录 下），回车，好了，线上页面效果出来了。

至此，项目的在线预览效果就实现了！
还没有结束！在项目的 master 分支上，混合了源代码和页面预览文件，能不能把两者分开？而且还有一个问题， index.html 总是在 dist 路径下的，能不能项目名称直接跟 index.html 。这里就引出另外一种办法了。

另外一种办法

采用 github 的 gh-pages 分支制作 GitHub Pages ，只把 dist 添加到 gh-pages 分支,这样就把源代码和页面预览文件分开了。制作GitHub Pages 上上上上上上上上上上上上上上上上上上上上葵花宝典：
在gh-pages分支中的setting下选择gh-pages branch，然后保存，再点击链接就有啦！
总结

以上所述是就是总结的vue项目实现github在线预览功能的方法。