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'
        }
    }
};

• 重启项目即可