vue-cli构建的项目，npm run dev时看到的页面对应的是npm run build之后dist文件夹中的index.html文件，而不是项目根目录下的index.html文件。
我第一次使用vue-cli构建的项目，在npm run build之后，在本地打开dist文件夹中的index.html文件，页面是空白的。而在本地npm run dev是完全没有问题的。更令我郁闷的是push到github上面时，dist文件都没了。
两个问题
一番摸索之后，终于找到了问题原因，我们逐一分析这两个问题。
忽略文件
对比github上和本地文件之后，发现最重要的dist文件没有被提交到github上，如下图
dist文件是npm run build执行后被编译打包生成的文件，CSS、JS、图片等文件都在dist文件中，所以该文件必须要提交到github上。
在项目根目录下有一个.gitignore文件，文件中设置一些文件名，对应的文件将不会被提交到github上面。
在.gitignore文件中，确实有dist文件名，如下图
把.gitignore文件中的dist文件名删除，然后重新push到github上就有了dist文件
路径问题
解决完上面dist文件的问题之后，打开该文件路径下的github pages预览地址，还是显示空白页，如下图
我们查看控制台，可以看到文件的路径都出现了问题，如下图
路径
这里解释一下路径问题中/、./、../的区别：
-
/
以/开头的路径就是绝对路径，/是指根目录，这里的根目录在本地就是指磁盘，在github上面就是指仓库的根目录，在网站上就是指服务器的根目录 -
./
以./开头的路径是相对路径，相对的是自身文件所在的目录，如下两种情况是没有区别的
./image/author.png
image/author.png
-
../
../是相对与自身文件的上级目录，属于相对路径
所以上图中的路径就出在路径前面的/，/表示根目录，我们总不能把static文件移动到根目录，这样就太傻了。
所以我们要找到配置文件更改下路径，找到config/index.js文件，如下图
修改图中assetsPublicPath的参数，每次npm run build后的文件路径将会按照参数生成，两种设置方法：
assetsPublicPath: './'
或
assetsPublicPath: ''
这样设置之后，再次npm run build，重新push到github上面，打开<your name>.github.io/<repositories>/dist/index.html就能看到预览页了
总结
每次的踩坑都是不可预知的，但解决之后是锻炼人的，也是有些许成就感的。这里总结一下这次遇到的问题，希望可以帮到其他人。
本文首发在个人博客yoowin.me，欢迎访问！
