文中若有錯誤从绘，歡迎指正访忿，希望對你有幫助！
故事背景是這樣的伴榔，最近做一個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)名稱（圖二）叙淌。
對于這個 Bug秤掌，大概困擾了我一個多月。一度很無奈解決不了鹰霍，甚至想過放棄使用 Muse UI闻鉴。直到今天才發(fā)現(xiàn)問題所在，然后就解決了茂洒。
按照官方文檔的方法引入（最后就在這里解決的孟岛，就是一個退格鍵的事）：
// 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是關(guān)于 Material Icon 的路徑)"，才意識到 URL 錯了督勺。
- 仔細(xì)對比路徑之后發(fā)現(xiàn)了問題渠羞，首頁的 Requset URL 是正確的，而歷史行程頁面是錯誤的智哀。然后就鎖定到
index.html中引入 Material Icon 的<link/>標(biāo)簽次询。- 跟官方文檔對比后，好像沒發(fā)現(xiàn)有錯瓷叫。由于
index.html和static文件夾是同級目錄下的屯吊，所以href="./static/fonts/material-icons/material-icons.css"按道理應(yīng)該是沒錯的，官方文檔也這么寫摹菠，但實際上確實出錯了盒卸。
于是乎......我把路徑改成項目根目錄，然后就行了次氨，如下蔽介。
// index.html
<link rel="stylesheet" href="/static/fonts/material-icons/material-icons.css">
在本地確定沒問題后，再打包項目放到云服務(wù)器上煮寡，看看能否讀取到靜態(tài)資源虹蓄，發(fā)現(xiàn)也正常。
回想整個過程洲押，最主要是因為沒發(fā)現(xiàn)在不同頁面下的 Request URL 不一致武花，且其中一個是不正確的。發(fā)現(xiàn)了這個問題杈帐，事情就好辦了体箕。當(dāng)然還有個問題沒明白：為什么 <link rel="stylesheet" href="./static/fonts/material-icons/material-icons.css"> 會不行（一個前端小白的疑問专钉？），遲點再上 GitHub 向大佬提個 Issue 找找原因累铅，到時在更新一下文章跃须。
由于這個 Bug 困擾我太久了，就寫篇文章記錄一下娃兽。
