成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Muse UI遇到的坑

OnlyLing / 2558人閱讀

摘要：項(xiàng)目本身需要用到字體包，但由于一些眾所周知的原因，國內(nèi)網(wǎng)絡(luò)無法訪問一些外網(wǎng)。下載字體包，然后放到靜態(tài)文件夾中，再從引入。問題來了情況一在系統(tǒng)首頁路由是，可以正常讀取到字體包，所以頁面渲染成功，沒問題的圖一。然后就鎖定到中引入的標(biāo)簽。

寫在前面：我只是一個(gè)前端小白，文章中的提到可能會(huì)有不足之處，僅提供一個(gè)參考。若有不完善的地方，歡迎各位大佬指出，希望對(duì)你有幫助！

故事背景是這樣的，最近做一個(gè)Vue項(xiàng)目，使用到 Muse UI 組件庫。剛開始時(shí)想著能用 Material Design 設(shè)計(jì)規(guī)范是一件非常開心的事情，然后事情并不會(huì)一直美好下去。。。

項(xiàng)目本身需要用到 Material Icon 字體包，但由于一些眾所周知的原因，國內(nèi)網(wǎng)絡(luò)無法訪問一些外網(wǎng)。于是采用了本地化部署字體的方法。下載 Material Icons 字體包，然后放到 static 靜態(tài)文件夾中，再從 index.html 引入。

問題來了：

情況一：在系統(tǒng)首頁（路由是："/"），可以正常讀取到字體包，所以頁面渲染成功，沒問題的（圖一）。
情況二：當(dāng)進(jìn)入其他路由（例如路由："/trip/history"，歷史行程），剛進(jìn)入頁面同樣是渲染成功。當(dāng)此時(shí)對(duì)頁面重新加載時(shí)，就會(huì)出現(xiàn)錯(cuò)誤，字體圖標(biāo)找不到，只顯示了的字體圖標(biāo)名稱（圖二）。

圖一 系統(tǒng)首頁



圖二 歷史行程

對(duì)于這個(gè) Bug，大概困擾了我一個(gè)多月。一度很無奈解決不了，甚至想過放棄使用 Muse UI。直到今天才發(fā)現(xiàn)問題所在，然后就解決了。

按照官方文檔的方法引入（最后就在這里解決的，就是一個(gè)退格鍵的事）：

// index.html

這個(gè) Bug 是在控制臺(tái)偶然 Warning：Resource interpreted as Stylesheet but transferred with MIME type text/html: "URL(這個(gè)URL是關(guān)于 Material Icon 的路徑)"，才意識(shí)到 URL 錯(cuò)了。

首頁



歷史行程

（1）仔細(xì)對(duì)比路徑之后發(fā)現(xiàn)了問題，首頁的 Requset URL 是正確的，而歷史行程頁面是錯(cuò)誤的。然后就鎖定到 index.html 中引入 Material Icon 的  標(biāo)簽。
（2）跟官方文檔對(duì)比后，好像沒發(fā)現(xiàn)有錯(cuò)。由于 index.html 和  static 文件夾是同級(jí)目錄下的，所以 href="./static/fonts/material-icons/material-icons.css" 按道理應(yīng)該是沒錯(cuò)的，官方文檔也這么寫，但實(shí)際上確實(shí)出錯(cuò)了。

于是乎......我把路徑改成項(xiàng)目根目錄，然后就行了，如下。

// index.html

在本地確定沒問題后，再打包項(xiàng)目放到云服務(wù)器上，看看能否讀取到靜態(tài)資源，發(fā)現(xiàn)也正常。

回想整個(gè)過程，最主要是因?yàn)闆]發(fā)現(xiàn)在不同頁面下的 Request URL 不一致，且其中一個(gè)是不正確的。發(fā)現(xiàn)了這個(gè)問題，事情就好辦了。當(dāng)然還有個(gè)問題沒明白：為什么 會(huì)不行（一個(gè)前端小白的疑問？），遲點(diǎn)再上 GitHub 向大佬提個(gè) Issue 找找原因，到時(shí)在更新一下文章。

由于這個(gè) Bug 困擾我太久了，就寫篇文章記錄一下。最后還是那句話：我只是一個(gè)前端小白，有什么不足之處歡迎指出！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95106.html

相關(guān)文章

  • Muse UI遇到的坑

    摘要：項(xiàng)目本身需要用到字體包，但由于一些眾所周知的原因，國內(nèi)網(wǎng)絡(luò)無法訪問一些外網(wǎng)。下載字體包，然后放到靜態(tài)文件夾中，再從引入。問題來了情況一在系統(tǒng)首頁路由是，可以正常讀取到字體包，所以頁面渲染成功，沒問題的圖一。然后就鎖定到中引入的標(biāo)簽。 寫在前面：我只是一個(gè)前端小白，文章中的提到可能會(huì)有不足之處，僅提供一個(gè)參考。若有不完善的地方，歡迎各位大佬指出，希望對(duì)你有幫助！ 故事背景是這樣的，最近做...

    scwang90 評(píng)論0 收藏0

  • 基于Vue2實(shí)現(xiàn)的仿手機(jī)QQapp（支持對(duì)話功能，滑動(dòng)刪除....）—— 聊聊開發(fā)過程中踩到的一些坑

    摘要：使用進(jìn)行的仿手機(jī)的的制作，在上，參考了設(shè)計(jì)師的作品，作品由個(gè)人獨(dú)立開發(fā)，源碼中進(jìn)行了詳細(xì)的注釋。關(guān)于接入聊天機(jī)器人遇到的跨域問題起初，天真的以為官方應(yīng)該提供了用的接口，然而沒有找到。 使用Vue2進(jìn)行的仿手機(jī)QQ的webapp的制作，在ui上，參考了設(shè)計(jì)師kaokao的作品，作品由個(gè)人獨(dú)立開發(fā)，源碼中進(jìn)行了詳細(xì)的注釋。 由于自己也是初學(xué)Vue2，所以注釋寫的不夠精簡，請(qǐng)見諒。 目前已實(shí)...

    williamwen1986 評(píng)論0 收藏0

  • 用Vue搭建一個(gè)應(yīng)用盒子（三）：音樂播放器

    摘要：組件結(jié)構(gòu)接著我們就該搭建這個(gè)播放器的組件了?？偟脑硎鞘紫全@取音頻的持續(xù)時(shí)間，然后通過一個(gè)定時(shí)器，不斷更新顯示時(shí)間，播放完成時(shí)，計(jì)時(shí)器停止。這個(gè)頁面比較簡單，播放器標(biāo)簽，綁定了事件，即播放完成后執(zhí)行。 這個(gè)播放器的開發(fā)歷時(shí)2個(gè)多月，并不是說它有多復(fù)雜，相反它的功能還非常不完善，僅具雛形。之所以磨磨蹭蹭這么久，一是因?yàn)橥涎?，二也是?shí)習(xí)公司項(xiàng)目太緊。8月底結(jié)束實(shí)習(xí)前寫完了樣式，之后在家空閑...

    appetizerio 評(píng)論0 收藏0

  • vue首屏加載優(yōu)化

    摘要：為了讓事情更簡單，允許將組件定義為一個(gè)工廠函數(shù)，動(dòng)態(tài)地解析組件的定義。只在組件需要渲染時(shí)觸發(fā)工廠函數(shù)，并且把結(jié)果緩存起來，用于后面的再次渲染。 庫使用情況 vue vue-router axios muse-ui material-icons vue-baidu-map 未優(yōu)化前 首先我們?cè)谡Ｇ闆r下buildshowImg(https://segmentfault.com/img...

    Kaede 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<