vue 页签图标 icon 修改设置

  • vue 页签图标 icon 修改设置已关闭评论
  • 16 次浏览
  • A+
所属分类:Web前端
摘要

最近在写 Vue 项目时,有一个需求是替换页签的图标,不过在网上查了好久,发现没有一个是生效的

最近在写 Vue 项目时,有一个需求是替换页签的图标,不过在网上查了好久,发现没有一个是生效的

最后结合了两篇文章里的内容,才将这个需求实现,现在来记录一下

 

在 vue.config.js文件中添加以下代码:

vue 页签图标 icon 修改设置

 

pwa:{       iconPaths:{           favicon32:'./public/chatmind-logo.svg',           favicon16:'./public/chatmind-logo.svg',           appleTouchTcom:'./public/chatmind-logo.svg',           maskIcon:'./public/chatmind-logo.svg',           msTileImage:'./public/chatmind-logo.svg'       }   },

然后在 public/index.html文件中修改原 icon 代码,将 <link rel="icon" href="">替换为以下代码

vue 页签图标 icon 修改设置

 

<link rel="icon" type="image/svg+xml" href="./chatmind-logo.svg"> <link rel="shortcut icon" type="image/svg+xml" href="./chatmind-logo.svg"> 

 

 

如果图标不是 svg 格式,而是 ico 格式,将上面代码中 type="image/svg+xml"替换为 type="image/x-icon"

 

在修改完 vue.config.js 文件中的代码后,记得重新启动项目,并且在调试模式中将浏览器设置为“禁用缓存”,如图所示:

vue 页签图标 icon 修改设置

这样刷新完网页后,页签的图标就会更新了