Vue-cli3使用manifest设置页签logo

一、前言

    Vue-cli3中使用manifest进行部分页面功能的管理。最近在项目中需要修改网页的logo，按照常规方式改了半天，发现没有生效，经过踩坑以及网上各路大神的帮助，成功修改了页签logo。

二、正文

1、manifest简单示例

{
  "name": "web",
  "short_name": "web",
  "icons": [
    {
      "src": "./img/icons/favicon-64x64.ico",//icon路径，在public中的路径，不要放在src中
      "sizes": "16x16 32x32 64x64",//icon大小匹配
      "type": "image/x-icon"//icon类型
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

2、index.html

<link rel="shortcut icon" href="./img/icons/favicon.ico" type="image/x-icon" />

3、注意

    不要将logo图片放在src中，因为webpack配置会将图片进行压缩打包，打包后的文件名字会被加上后缀，要放在public中。