乐趣区

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

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

此时查看元素,显示路径如下:

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

将其修改为 ’./’,如下图:

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

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

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

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

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

退出移动版