Muse UI遇到的坑

忘是亡心i 2022-05-24 02:58 104阅读 0赞

写在前面：我只是一个前端小白，文章中的提到可能会有不足之处，仅提供一个参考。若有不完善的地方，欢迎各位大佬指出，希望对你有帮助！

故事背景是这样的，最近做一个Vue项目，使用到 [Muse UI][] 组件库。刚开始时想着能用 Material Design 设计规范是一件非常开心的事情，然后事情并不会一直美好下去。。。

项目本身需要用到 Material Icon 字体包，但由于一些众所周知的原因，国内网络无法访问一些外网。于是采用了本地化部署字体的方法。下载 Material Icons 字体包，然后放到 `static` 静态文件夹中，再从 `index.html` 引入。

问题来了：

> 1.  在系统首页（路由是：”/”），可以正常读取到字体包，所以页面渲染成功，没问题的（图一）。
> 2.  当进入其他路由（例如路由：”/trip/history”，历史行程），刚进入页面同样是渲染成功。当此时对页面重新加载时，就会出现错误，字体图标找不到，只显示了的字体图标名称（图二）。

图一：系统首页  
![图一 系统首页][70]  
图二： 历史行程  
![图二 历史行程][70 1]

> 对于这个 Bug，大概困扰了我一个多月。一度很无奈解决不了，甚至想过放弃使用 Muse UI。直到今天才发现问题所在，然后就解决了。

按照官方文档的方法引入（最后就在这里解决的，就是一个退格键的事）：

// index.html
    <link rel="stylesheet" href="./static/fonts/material-icons/material-icons.css"/>

这个 Bug 是在控制台偶然 Warning：`Resource interpreted as Stylesheet but transferred with MIME type text/html: "URL(这个URL是关于 Material Icon 的路径)"`，才意识到 URL 错了。

首页：  
![首页][70 2]  
历史行程：  
![历史行程][70 3]

> 1.  仔细对比路径之后发现了问题，首页的 Requset URL 是正确的，而历史行程页面是错误的。然后就锁定到 `index.html` 中引入 Material Icon 的 `<link/>` 标签。
> 2.  跟官方文档对比后，好像没发现有错。由于 `index.html` 和 `static` 文件夹是同级目录下的，所以 `href="./static/fonts/material-icons/material-icons.css"` 按道理应该是没错的，官方文档也这么写，但实际上确实出错了。

于是乎……我把路径改成项目根目录，然后就行了，如下。

// index.html
    <link rel="stylesheet" href="/static/fonts/material-icons/material-icons.css">

在本地确定没问题后，再打包项目放到云服务器上，看看能否读取到静态资源，发现也正常。

回想整个过程，最主要是因为没发现在不同页面下的 Request URL 不一致，且其中一个是不正确的。发现了这个问题，事情就好办了。当然还有个问题没明白：为什么 `<link rel="stylesheet" href="./static/fonts/material-icons/material-icons.css">` 会不行（一个前端小白的疑问？），迟点再上 [GitHub][] 向大佬提个 Issue 找找原因，到时在更新一下文章。

由于这个 Bug 困扰我太久了，就写篇文章记录一下。最后还是那句话：我只是一个前端小白，有什么不足之处欢迎指出！

[Muse UI]: http://www.muse-ui.org/#/index
[70]: /images/20220524/0413c4b476e74de6baeb9666e4cab395.png
[70 1]: /images/20220524/339d248932c24590ab1f8f5e68343d7a.png
[70 2]: /images/20220524/cfcac84585b944e8a76017ca97eba5b4.png
[70 3]: /images/20220524/0574b7bc70e04d5a83acf1394eeba026.png
[GitHub]: https://github.com/museui/muse-ui