umi 的項目中如何修改 favicon


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM