vue通过vue-cli打包后本地打开页面资源加载报错，页面空白

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

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

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

将其修改成'./'，以下图：

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

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

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

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

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