摘要：项目本身需要用到字体包，但由于一些众所周知的原因，国内网络无法访问一些外网。下载字体包，然后放到静态文件夹中，再从引入。问题来了情况一在系统首页路由是，可以正常读取到字体包，所以页面渲染成功，没问题的图一。然后就锁定到中引入的标签。
写在前面：我只是一个前端小白，文章中的提到可能会有不足之处，仅提供一个参考。若有不完善的地方，欢迎各位大佬指出，希望对你有帮助！
故事背景是这样的，最近做一个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/57666.html
摘要：项目本身需要用到字体包，但由于一些众所周知的原因，国内网络无法访问一些外网。下载字体包，然后放到静态文件夹中，再从引入。问题来了情况一在系统首页路由是，可以正常读取到字体包，所以页面渲染成功，没问题的图一。然后就锁定到中引入的标签。 写在前面：我只是一个前端小白，文章中的提到可能会有不足之处，仅提供一个参考。若有不完善的地方，欢迎各位大佬指出，希望对你有帮助！ 故事背景是这样的，最近做...
摘要：项目本身需要用到字体包，但由于一些众所周知的原因，国内网络无法访问一些外网。下载字体包，然后放到静态文件夹中，再从引入。问题来了情况一在系统首页路由是，可以正常读取到字体包，所以页面渲染成功，没问题的图一。然后就锁定到中引入的标签。 写在前面：我只是一个前端小白，文章中的提到可能会有不足之处，仅提供一个参考。若有不完善的地方，欢迎各位大佬指出，希望对你有帮助！ 故事背景是这样的，最近做...
摘要：使用进行的仿手机的的制作，在上，参考了设计师的作品，作品由个人独立开发，源码中进行了详细的注释。关于接入聊天机器人遇到的跨域问题起初，天真的以为官方应该提供了用的接口，然而没有找到。 使用Vue2进行的仿手机QQ的webapp的制作，在ui上，参考了设计师kaokao的作品，作品由个人独立开发，源码中进行了详细的注释。 由于自己也是初学Vue2，所以注释写的不够精简，请见谅。 目前已实...
摘要：组件结构接着我们就该搭建这个播放器的组件了。总的原理是首先获取音频的持续时间，然后通过一个定时器，不断更新显示时间，播放完成时，计时器停止。这个页面比较简单，播放器标签，绑定了事件，即播放完成后执行。 这个播放器的开发历时2个多月，并不是说它有多复杂，相反它的功能还非常不完善，仅具雏形。之所以磨磨蹭蹭这么久，一是因为拖延，二也是实习公司项目太紧。8月底结束实习前写完了样式，之后在家空闲...
阅读 2816·2021-10-27 14:20
阅读 2486·2021-10-12 10:12
阅读 2380·2021-10-08 10:05
阅读 1480·2021-09-09 09:33
阅读 3428·2021-09-07 09:59
阅读 2763·2019-08-30 13:16
阅读 1322·2019-08-29 18:34
阅读 1047·2019-08-29 10:58
