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

本文首发于yoowin.me，欢迎访问！

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就能看到预览页了

总结

每次的踩坑都是不可预知的，但解决以后是锻炼人的，也是有些许成就感的。这里总结一下此次遇到的问题，但愿能够帮到其余人。