VUE3 项目如何自定义修改网页图标

 时间:2024-10-28 18:06:18

1、首先,vue项目的图标不是普通img,所以在目录public-index.html中可以看到<linkrel="shortcuticon"href="<%=BASE_URL%>favicon.ico">图片被转换成了链接

VUE3 项目如何自定义修改网页图标VUE3 项目如何自定义修改网页图标

2、把之前vue默认的favicon.ico图片删掉,添加自己的项目图片并重命名为favicon.ico,另外,在vue.config.js中配置pwa:{iconPaths:{favi艘早祓胂con32:'favicon.ico',favicon16:'favicon.ico',appleTouchIcon:'favicon.ico',maskIcon:'favicon.ico',msTileImage:'favicon.ico'}},

VUE3 项目如何自定义修改网页图标

3、重启项目,即可看到网页标题图标发生了变化。如果你不想要图标,可以把这句<linkrel="shortcuticon"href="<%=BASE_URL%>favicon.ico">注释掉,就会显示浏览器默认的图表样式。(注:可能注释掉之后还会显示之前的图标,这是因为浏览器缓存了之前的图片,所以换一个浏览器就会发现已经没有图表显示了)

VUE3 项目如何自定义修改网页图标
  • 虚拟机的vm怎么彻底卸载干净?
  • 如何启用SQLserver的TCP/IP协议
  • Android Studio如何更换JDK版本
  • 如何在SQL Server数据库中修改身份验证方式
  • IDEA界面如何设为中文?
  • 热门搜索
    爱祖国手抄报资料 法制安全手抄报资料 法制手抄报版面设计图 诚实手抄报 小学生读书节手抄报 关于爱鸟护鸟的手抄报 黑白手抄报图片 民族风情手抄报 法制教育手抄报资料 健康手抄报的内容