Muse UI遇到的坑
写在前面：我只是一个前端小白，文章中的提到可能会有不足之处，仅提供一个参考。若有不完善的地方，欢迎各位大佬指出，希望对你有帮助！
故事背景是这样的，最近做一个Vue项目，使用到 Muse UI 组件库。刚开始时想着能用 Material Design 设计规范是一件非常开心的事情，然后事情并不会一直美好下去。。。
项目本身需要用到 Material Icon 字体包，但由于一些众所周知的原因，国内网络无法访问一些外网。于是采用了本地化部署字体的方法。下载 Material Icons 字体包，然后放到 static 静态文件夹中，再从 index.html 引入。
问题来了：
- 在系统首页（路由是：”/”），可以正常读取到字体包，所以页面渲染成功，没问题的（图一）。
- 当进入其他路由（例如路由：”/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 错了。
首页：
历史行程：
- 仔细对比路径之后发现了问题，首页的 Requset URL 是正确的，而历史行程页面是错误的。然后就锁定到
index.html中引入 Material Icon 的<link/>标签。- 跟官方文档对比后，好像没发现有错。由于
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遇到的坑相关推荐
- Muse UI遇到的坑 1
写在前面:我只是一个前端小白,文章中的提到可能会有不足之处,仅提供一个参考.若有不完善的地方,欢迎各位大佬指出,希望对你有帮助! 故事背景是这样的,最近做一个Vue项目,使用到 Muse UI 组件库 ...
- Muse UI — 基于 Vue2.0 的 Material Design UI 库
Vue 2.0 发布以来,很多 vue 的开源项目都开始了升级计划,我也思考着 vue-carbon 的升级之路,9月开工,11月完工, Muse UI 闪亮登场. 先睹为快 Muse UI 主要用于 ...
- Muse UI - 优雅的 Material Design 风格 UI 组件
一款基于 Vue 2.0 的 UI 组件库,按 Material Design 设计规范实现,体验优秀,使用简单. Muse UI 介绍 Muse UI 是一款基于 Vue.js 的优雅 UI 组件库 ...
- muse ui 的table组件的选择事件说明
muse ui是一套基于vue 2.0的ui组件,它的点击特效.组件模型等都特别适合移动端开发,今天在做一个移动项目是,用到里面的table组件,对其进行选择行操作,根据官方文档的提示一直不解.提示如 ...
- Muse UI 样式
Muse UI的icon是国外网站,被墙了所以用这个网址的icon,在index.html文件中引入下面链接: <link rel="stylesheet" href=&qu ...
- muse ui去除按钮阴影_如何在Photoshop和Adobe Muse中创建按钮
muse ui去除按钮阴影 在本教程中,我将向您展示如何在Photoshop中创建按钮以及如何在Adobe Muse项目中使用按钮的所有状态. 一旦设计好Photoshop资源并将其导入到Adobe ...
- Muse ui的使用
//添加对手机端的支持 <meta name="viewport" content="width=device-width, initial-scale=1.0, ...
- webpack 打包后 字体文件不存在 用muse ui 字体图标不显示
muse ui 字体图标文过大 在 build/webpack.base.config.js {test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url- ...
- muse ui 覆盖其样式
vue 单个页面对muse ui 某个组件样式修改,选中不到 解决办法: 1,设置自己的类名,然后修改 2,写在公共样式里,对其进行覆盖
最新文章
- 天冷了，大家如果有往年的不穿的衣服别扔，寄给需要的人好吗？
- Linux如何实现断点续传文件功能？
- java继承中构造方法_java之继承中构造方法总结(文字版)
- （继承）virtual与访问控制
- 【CyberSecurityLearning 18】ACL及实验演示
- pycharm python3区别_1.安装Python3和PyCharm
- cent os重置mysql,linux mysql 能登陆不能修改用户（cent os 6.2）解决思路
- 沉船会有什么_世界六大沉船，最后一艘有40吨财宝！8吨黄金！你眼红了吗？
- 学习 服务器部署 hello world
- Xtreme ToolkitPro 编译选项
- mysql安装排错-解决1
- sogou rank查询接口
- php中阿里云快递物流查询接口使用
- HBase 下载地址
- JVM(4)-MAT: 支配树 Dominator Tree
- 【python】numpy库np.percentile详解
- 软件项目管理三国启示录01 群雄争霸之项目经理的自我修养
- UML时序图(Sequence Diagram)
- 右侧追击（二）——券商行业
- 大疆网上测评题库_大疆科技题目