資訊專欄INFORMATION COLUMN
摘要：項目本身需要用到字體包，但由于一些眾所周知的原因，國內網絡無法訪問一些外網。下載字體包，然后放到靜態文件夾中，再從引入。問題來了情況一在系統首頁路由是，可以正常讀取到字體包，所以頁面渲染成功，沒問題的圖一。然后就鎖定到中引入的標簽。
寫在前面：我只是一個前端小白，文章中的提到可能會有不足之處，僅提供一個參考。若有不完善的地方，歡迎各位大佬指出，希望對你有幫助！
故事背景是這樣的，最近做一個Vue項目，使用到 Muse UI 組件庫。剛開始時想著能用 Material Design 設計規范是一件非常開心的事情，然后事情并不會一直美好下去。。。
項目本身需要用到 Material Icon 字體包，但由于一些眾所周知的原因，國內網絡無法訪問一些外網。于是采用了本地化部署字體的方法。下載 Material Icons 字體包，然后放到 static 靜態文件夾中，再從 index.html 引入。
問題來了：
情況一：在系統首頁（路由是："/"），可以正常讀取到字體包，所以頁面渲染成功，沒問題的（圖一）。
情況二：當進入其他路由（例如路由："/trip/history"，歷史行程），剛進入頁面同樣是渲染成功。當此時對頁面重新加載時，就會出現錯誤，字體圖標找不到，只顯示了的字體圖標名稱（圖二）。
圖一 系統首頁
圖二 歷史行程
對于這個 Bug，大概困擾了我一個多月。一度很無奈解決不了，甚至想過放棄使用 Muse UI。直到今天才發現問題所在，然后就解決了。
按照官方文檔的方法引入（最后就在這里解決的，就是一個退格鍵的事）：
// index.html
這個 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 的 標簽。
（2）跟官方文檔對比后，好像沒發現有錯。由于 index.html 和 static 文件夾是同級目錄下的，所以 href="./static/fonts/material-icons/material-icons.css" 按道理應該是沒錯的，官方文檔也這么寫，但實際上確實出錯了。
于是乎......我把路徑改成項目根目錄，然后就行了，如下。
// index.html
在本地確定沒問題后，再打包項目放到云服務器上，看看能否讀取到靜態資源，發現也正常。
回想整個過程，最主要是因為沒發現在不同頁面下的 Request URL 不一致，且其中一個是不正確的。發現了這個問題，事情就好辦了。當然還有個問題沒明白：為什么 會不行（一個前端小白的疑問？），遲點再上 GitHub 向大佬提個 Issue 找找原因，到時在更新一下文章。
由于這個 Bug 困擾我太久了，就寫篇文章記錄一下。最后還是那句話：我只是一個前端小白，有什么不足之處歡迎指出！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113316.html
摘要：項目本身需要用到字體包，但由于一些眾所周知的原因，國內網絡無法訪問一些外網。下載字體包，然后放到靜態文件夾中，再從引入。問題來了情況一在系統首頁路由是，可以正常讀取到字體包，所以頁面渲染成功，沒問題的圖一。然后就鎖定到中引入的標簽。 寫在前面：我只是一個前端小白，文章中的提到可能會有不足之處，僅提供一個參考。若有不完善的地方，歡迎各位大佬指出，希望對你有幫助！ 故事背景是這樣的，最近做...
摘要：使用進行的仿手機的的制作，在上，參考了設計師的作品，作品由個人獨立開發，源碼中進行了詳細的注釋。關于接入聊天機器人遇到的跨域問題起初，天真的以為官方應該提供了用的接口，然而沒有找到。 使用Vue2進行的仿手機QQ的webapp的制作，在ui上，參考了設計師kaokao的作品，作品由個人獨立開發，源碼中進行了詳細的注釋。 由于自己也是初學Vue2，所以注釋寫的不夠精簡，請見諒。 目前已實...
摘要：組件結構接著我們就該搭建這個播放器的組件了。總的原理是首先獲取音頻的持續時間，然后通過一個定時器，不斷更新顯示時間，播放完成時，計時器停止。這個頁面比較簡單，播放器標簽，綁定了事件，即播放完成后執行。 這個播放器的開發歷時2個多月，并不是說它有多復雜，相反它的功能還非常不完善，僅具雛形。之所以磨磨蹭蹭這么久，一是因為拖延，二也是實習公司項目太緊。8月底結束實習前寫完了樣式，之后在家空閑...
閱讀 3071·2021-10-11 10:58
閱讀 1988·2021-09-24 09:47
閱讀 502·2019-08-30 14:19
閱讀 1683·2019-08-30 13:58
閱讀 1444·2019-08-29 15:26
閱讀 640·2019-08-26 13:45
閱讀 2139·2019-08-26 11:53
閱讀 1772·2019-08-26 11:30
