Muse UI遇到的坑

OnlyLing 發(fā)布于2019-08-22 17:22 / 2539人閱讀

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

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

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

項目本身需要用到 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)此時對頁面重新加載時，就會出現(xiàn)錯誤，字體圖標(biāo)找不到，只顯示了的字體圖標(biāo)名稱（圖二）。

圖一系統(tǒng)首頁

圖二歷史行程

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

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

// index.html

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

首頁

歷史行程

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

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

// index.html

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

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

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