umi 的專案中如何修改 favicon
阿新 • • 發佈：2020-11-02
瀏覽器在解析html檔案時會將型別為icon的link標籤引用的圖片作為網頁的favicon，也就是網站標籤左上角的小圖示。
有兩種方法加入link標籤：
1. 在document.ejs中使用link標籤
<head> <link rel="icon" type="image/x-icon" href="favicon.ico" /> </head>
umi 約定如果存在src/document.ejs 檔案，則將其作為html模板。
2. 在umi配置檔案裡配置links
links: [{ rel: 'icon', href: '/img/favicon.ico' }] 但是！注意坑：umi是不會去編譯html檔案的，也就是說這裡的href如果寫的是開發時的圖片路徑，umi是不會主動去找到圖片並給你打包進輸出檔案裡的。
那麼像這樣在html裡引用的靜態資源，不像js裡的資源可以被webpack解析打包輸出，我們要怎麼搞到輸出檔案裡去呢？
此時就要用到umi的約定：“public 目錄：此目錄下所有檔案會被 copy 到輸出路徑”。新建一個 /public目錄把圖示放進去，可以在輸出檔案的根目錄裡訪問到。
比如網頁放在localhost:8000上，這裡的href="favicon.ico" 就會往localhost:8000/favicon.ico 傳送Get資源請求，即專案輸出檔案的根目錄。換句話說，如果你的資源放在/public/img下，那麼href應該寫"img/favicon.ico"
實際的專案中。
document.ejs在pages內
<head> <link rel="icon" type="image/x-icon" href="favicon.ico" /> </head>
在public檔案中放favicon.ico