Vue使用——vue設置瀏覽器顯示圖標

背景

• Vue前端項目，需要設置瀏覽器小圖標，如下圖：

 

• 網上有很多教程，說直接在public/index.html中修改圖標路徑。可是我的項目沒有使用index.html作為項目首頁，所以此方法行不通。

開發環境

• vue cli3

方法

• 網上有很多教程，說直接在public/index.html中修改圖標路徑。可是我的項目沒有使用index.html作為項目首頁，所以此方法行不通。
• 我采用在項目的vue.config.js中使用pwa對瀏覽器圖標進行配置。

步驟

• 在項目根目錄的public文件夾下導入自己想要顯示的圖片，（如果沒有public文件夾，就自己新建一個）
• 將導入的圖片修改為favicon.ico，（無論什么格式的圖片，都要修改為這個名稱及格式，系統只認這個ico文件作為瀏覽器圖標），如下圖

• 配置vue.config.js，如下

module.exports = {
    pwa: {
        iconPaths: {
            favicon32: 'favicon.ico',
            favicon16: 'favicon.ico',
            appleTouchIcon: 'favicon.ico',
            maskIcon: 'favicon.ico',
            msTileImage: 'favicon.ico'
        }
    }
};

• 重啟項目即可