选择
master branch ，保存，接着你会看到项目在线预览链接，点击链接
此时，你会看到页面一片空白，别急，在地址栏后面添加
dist （因为
index.html 是在
dist目录 下），回车，好了，线上页面效果出来了
至此，项目的在线预览效果就实现了！！
还没有结束！在项目的
master 分支上，混合了源代码和页面预览文件，能不能把两者分开？而且还有一个问题，
index.html 总是在
dist 路径下的，能不能项目名称直接跟
index.html 。这里就引出另外一种办法了。另外一种办法
采用
github 的
gh-pages 分支制作
GitHub Pages ，只把
dist 添加到
gh-pages 分支,这样就把源代码和页面预览文件分开了（先把本地的
dist 文件夹删除，再上传到
github ，更新
master 分支）
git 命令操作
git run build
git branch gh-pages //创建gh-pages分支
git checkout gh-pages //切换到gh-pages分支
git add -f dist //强制把dist文件夹提交到github
$ git subtree push --prefix dist origin gh-pages //把dist文件夹单独部署到gh-pages分支
这里要选择
gh-pages branch ，再点击连接，如果此时看到空白页面，别急，稍等一会（内容更新需要时间）好了，现在看仓库的
master 分支，不存在
dist 文件夹了，再看线上预览地址，也完美了
总结
以上所述是小编给大家介绍的vue项目实现github在线预览功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
