关于vue-cli构建的项目在github上的预览问题

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，欢迎访问！