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

前两天写了一篇关于vuex2.0的小米便签项目实例，有网友建议增长在线预览的效果，而后在github上增长可预览项目时遇到并解决一些问题，在这给你们作个分享。

个人小米便签项目是用vue-cli脚手架构建的，在执行npm run build命令以后会对项目进行编译打包，并在项目中生产dist文件夹，压缩后的文件都在dist文件夹中。

然而，在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预览地址，在进行预览的时候又发现一个问题 路径问题。

查看控制台，能够看到文件的路径都出现了问题，以下图:

发现文件的路径都是/根路径,咱们总不能把static文件移动到根目路径下吧，那样就太low了。

因此咱们要找到配置文件更改下路径，找到config/index.js文件，以下图：

修改图中assetsPublicPath的参数：assetsPublicPath: './'或者assetsPublicPath: ''，修改后，每次执行npm run build后文件路径将会按照参数生成。

这样设置以后，再次npm run build，从新push到github上面，打开<yourname>.github.io/<repositories name>/dist/index.html就能看到预览页了，个人小米便签预览地址。

总结

这就是我在增长可预览地址时遇到的一些问题，在这分享出来，但愿能帮助到须要帮助的人。

来都来了点一下赞吧，你的赞是对我最大的鼓励^_^