前言
最近在使用vue-cli脚手架工具构建自己的第一个vue项目，有点小激动，想把它上传到github并展示一下预览效果，结果踩了好多坑，折腾了大半天才弄好。写下这篇文章（这也是我在掘金写的第一篇文章），如果有同学刚好遇到同样问题，希望对你们有所帮助。
这里假设你也是和我一样使用了
vue-cli搭建了自己的项目，并且项目也已经上传到了github
问题1
当我们在命令行执行npm run build后，项目的目录下会生成一个dist文件夹，它里面又包含一个static文件夹和一个index.html文件，这是webpack最终打包好的文件
index.html
script标签的引入路径好像不对啊，因为static文件夹和index.html是在同一个目录下的，这里却是从根目录引入static下的文件，正确的路径应该是./开头的相对路径：
src='./static/...' 或者src='static/...'
是哪里出了问题？其实这跟配置资源的路径有关，打开项目根目录config文件夹下的index.js，定位到build下的assetsPublicPath（dev下也有一个assetsPublicPath，别搞错了，我就是在这里踩了第一个坑），把
assetsPublicPath: '/'修改为assetsPublicPath: './'
script标签的引入路径就找不到static文件夹下的文件了
重新执行npm run build，再打开index.html文件
OK!在浏览器可以看到页面效果了！
也行你会问，为什么assetsPublicPath的路径要设置为在根目录下，这不是在折腾我们吗？其实这是因为在真正的项目开发中，index.html和static文件夹会被放到服务器的根目录下，然后进行线上发布。
问题2
本地预览问题解决了，接着我们把项目push到github
dist文件没有被上传到github，怎么回事？找到项目根目录的.gitignore文件，这里设置一些文件名，对应的文件将不会被提交到github上面，而dist被设置在里面，所以就不能上传到github上了，我们可以把dist从文件里移除。
当然还有另一种办法，就是在操作git命令时，把git add.改为git add -f dist意思是强制把dist文件提交到github。
github仓库里看到dist文件夹。
疑惑，什么
dist文件夹要设置不被提交？ 试想一下，在真正项目开发中，dist文件夹中的static和index.html最终是要被扔到服务器上的，而不是提交到github上。
现在还是不能实现项目的线上预览效果，点击项目的setting项，然后找到Github Pages
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文件夹了，再看线上预览地址，也完美了
扫二维码预览效果
如果是移动端项目，使用手机扫二维码查看预览效果就更佳了，推荐草料二维码
扫一扫，查看我的项目！
