0
点赞
收藏
分享

微信扫一扫

Muse UI遇到的坑

Java旺 2021-09-25 阅读 37
前端

文中若有错误,欢迎指正,希望对你有帮助!

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

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

问题来了:


按照官方文档的方法引入(最后就在这里解决的,就是一个退格键的事):

// 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 错了。


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

// 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 困扰我太久了,就写篇文章记录一下。

举报

相关推荐

0 条评论