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 錯了。

首頁



歷史行程

（1）仔細對比路徑以後發現了問題，首頁的 Requset URL 是正確的，而歷史行程頁面是錯誤的。而後就鎖定到 index.html 中引入 Material Icon 的 <link/> 標籤。
（2）跟官方文檔對比後，好像沒發現有錯。因爲 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 困擾我過久了，就寫篇文章記錄一下。最後仍是那句話：我只是一個前端小白，有什麼不足之處歡迎指出！