瀏覽器在解析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