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就能看到预览页了，我的小米便签预览地址。

总结

这就是我在增加可预览地址时遇到的一些问题，在这分享出来，希望能帮助到需要帮助的人。

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