摘要:项目本身需要用到字体包,但由于一些众所周知的原因,国内网络无法访问一些外网。下载字体包,然后放到静态文件夹中,再从引入。问题来了情况一在系统首页路由是,可以正常读取到字体包,所以页面渲染成功,没问题的图一。然后就锁定到中引入的标签。
写在前面:我只是一个前端小白,文章中的提到可能会有不足之处,仅提供一个参考。若有不完善的地方,欢迎各位大佬指出,希望对你有帮助!
故事背景是这样的,最近做一个Vue项目,使用到 Muse UI 组件库。刚开始时想着能用 Material Design 设计规范是一件非常开心的事情,然后事情并不会一直美好下去。。。
项目本身需要用到 Material Icon 字体包,但由于一些众所周知的原因,国内网络无法访问一些外网。于是采用了本地化部署字体的方法。下载 Material Icons 字体包,然后放到 static 静态文件夹中,再从 index.html 引入。
问题来了:
情况一:在系统首页(路由是:"/"),可以正常读取到字体包,所以页面渲染成功,没问题的(图一)。
情况二:当进入其他路由(例如路由:"/trip/history",历史行程),刚进入页面同样是渲染成功。当此时对页面重新加载时,就会出现错误,字体图标找不到,只显示了的字体图标名称(图二)。
图一 系统首页
图二 历史行程
对于这个 Bug,大概困扰了我一个多月。一度很无奈解决不了,甚至想过放弃使用 Muse UI。直到今天才发现问题所在,然后就解决了。
按照官方文档的方法引入(最后就在这里解决的,就是一个退格键的事):
// index.html
这个 Bug 是在控制台偶然 Warning:Resource interpreted as Stylesheet but transferred with MIME type text/html: "URL(这个URL是关于 Material Icon 的路径)",才意识到 URL 错了。
首页
历史行程
(1)仔细对比路径之后发现了问题,首页的 Requset URL 是正确的,而历史行程页面是错误的。然后就锁定到 index.html 中引入 Material Icon 的 标签。
(2)跟官方文档对比后,好像没发现有错。由于 index.html 和 static 文件夹是同级目录下的,所以 href="./static/fonts/material-icons/material-icons.css" 按道理应该是没错的,官方文档也这么写,但实际上确实出错了。
于是乎......我把路径改成项目根目录,然后就行了,如下。
// index.html
在本地确定没问题后,再打包项目放到云服务器上,看看能否读取到静态资源,发现也正常。
回想整个过程,最主要是因为没发现在不同页面下的 Request URL 不一致,且其中一个是不正确的。发现了这个问题,事情就好办了。当然还有个问题没明白:为什么 会不行(一个前端小白的疑问?),迟点再上 GitHub 向大佬提个 Issue 找找原因,到时在更新一下文章。
由于这个 Bug 困扰我太久了,就写篇文章记录一下。最后还是那句话:我只是一个前端小白,有什么不足之处欢迎指出!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/95106.html
摘要:项目本身需要用到字体包,但由于一些众所周知的原因,国内网络无法访问一些外网。下载字体包,然后放到静态文件夹中,再从引入。问题来了情况一在系统首页路由是,可以正常读取到字体包,所以页面渲染成功,没问题的图一。然后就锁定到中引入的标签。 写在前面:我只是一个前端小白,文章中的提到可能会有不足之处,仅提供一个参考。若有不完善的地方,欢迎各位大佬指出,希望对你有帮助! 故事背景是这样的,最近做...
摘要:使用进行的仿手机的的制作,在上,参考了设计师的作品,作品由个人独立开发,源码中进行了详细的注释。关于接入聊天机器人遇到的跨域问题起初,天真的以为官方应该提供了用的接口,然而没有找到。 使用Vue2进行的仿手机QQ的webapp的制作,在ui上,参考了设计师kaokao的作品,作品由个人独立开发,源码中进行了详细的注释。 由于自己也是初学Vue2,所以注释写的不够精简,请见谅。 目前已实...
摘要:组件结构接着我们就该搭建这个播放器的组件了。总的原理是首先获取音频的持续时间,然后通过一个定时器,不断更新显示时间,播放完成时,计时器停止。这个页面比较简单,播放器标签,绑定了事件,即播放完成后执行。 这个播放器的开发历时2个多月,并不是说它有多复杂,相反它的功能还非常不完善,仅具雏形。之所以磨磨蹭蹭这么久,一是因为拖延,二也是实习公司项目太紧。8月底结束实习前写完了样式,之后在家空闲...
阅读 2536·2023-04-25 19:47
阅读 3382·2019-08-29 17:18
阅读 855·2019-08-29 15:26
阅读 3358·2019-08-29 14:17
阅读 1112·2019-08-26 13:49
阅读 3337·2019-08-26 13:22
阅读 3021·2019-08-26 10:44
阅读 2692·2019-08-23 16:51