Muse UI遇到的坑

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

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

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

问题来了:

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

图二 历史行程

对于这个 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 错了。

首页

历史行程
  1. 仔细对比路径之后发现了问题,首页的 Requset URL 是正确的,而历史行程页面是错误的。然后就锁定到index.html中引入 Material Icon 的<link/>标签。
  2. 跟官方文档对比后,好像没发现有错。由于 index.htmlstatic 文件夹是同级目录下的,所以 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 困扰我太久了,就写篇文章记录一下。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容