vue经过vuecli打包后本地打开页面资源加载报错页面空白

由于对脚手架这些东西，运用不是太熟，所以在打包项目时遇到一些小坑，在此做一下小结：
首次打包完毕，在本地打开 dist 下的入口页面 index.html 时，页面展示了一个大大的空白，打开控制台显示未发现要加载的资源，

此时查看元素，显示路径如下：

查找问题原因是由于打包时输出的资源路径问题，找到 config 文件夹下的 index.js 文件，找到 assetsPublicPath 参数，其默认参数值是：’/’ 如下图：

将其修改为 ’./’，如下图：

修改原因：assetsPublicPath 为输出后资源的根目录，’/’ 是根目录，参考的是盘符，是绝对路径；而 ’./’ 是当前目录，参考的是当前文件夹，是相对路径。
修改完毕后再次打包，页面还是空白页，打开控制台，也没有抱任何错误，查看元素，资源路径也是正确的，如图右侧红框：

再次陷入崩溃，控制台无任何报错，于是就去各大网站找相关 bug 文章，好在一篇文章提到 vue-router 的模式。vue-router 的两种模式：hash 模式和 history 模式。相关区别请移步官方文档：vue HTML5History 模式。修改如下图所示：

修改前浏览器地址栏路径：

修改后浏览器地址栏路径：

折磨我将近两天的，空白 bug 到此为止算是解决了，本篇文章，纯属自我笔记类，望同仁提出修改，共同提高！