vue項目中配置favicon圖標

如上圖所示，頁面頂部的小圖標會讓頁面顯得高大上，通常把這種圖標叫作favicon圖標。利用vue-cli腳手架搭建的項目，若是不手動配置，頁面中是不會顯示favicon圖標。

不配置是這樣子的：

 

favicon圖標的配置也很簡單，vue-cli默認幫咱們安裝了html-webpack-plugin（若是沒有，能夠本身npm安裝），咱們只需在html-webpack-plugin插件中添加favicon選項便可。html-webpack-plugin插件須要配置兩處，一處是在開發環境下配置，另外一處是在打包後的環境下配置，若是隻配置開發環境下的，沒有配置打包後環境的，形成的結果就是，項目本地運行時會有favicon圖標，打包後放在服務器上時發現沒有favicon圖標；反之亦然。詳細配置以下：

一、開發環境（開發調試時）配置：

 

二、生產環境（打包後）配置：

 

 

注意：配置favicon圖標的路徑是相對路徑！！！
---------------------