vue3修改link标签默认icon无效问题详解


Posted in Javascript onOctober 09, 2019

vue3修改link中标签默认icon,vue3初次使用的时候不好好阅读配置难免会遇到一些坑,本人在项目完结的时候打算把浏览器的导航小icon图标给替换了,可是并没有那么顺利,那么如何在vue3中替换默认的icon(favicon.ico)的导航栏图标呢:

public的index.html有这么一句话,毫无疑问,一看给人的感觉就是在这个位置替换了

vue3修改link标签默认icon无效问题详解

vue3修改link标签默认icon无效问题详解

而且favicon.ico也是小图标,于是我直接替换,发现并不生效(特殊情况),把<%= BASE_BA %>直接改成./发现也不生效,怎么回事呢?

我们顺着问题进行查找,f12打开浏览器调试台查看结构中的icon link href指向

vue3修改link标签默认icon无效问题详解

居然多了这么多图标地址,还是看官方配置吧,原来是忽略了pwa这个配置(该配置在vue.config.js中进行,不会的请看历史文章,有个介绍vue-config.js的配置介绍):

pwa里面有个iconPaths这个选项可以用来替换地址,官网没有详细说明,在gitHup上有介绍----点击去PWA配置

pwa:{
  iconPaths:{
   favicon32: 'favicon.ico',
   favicon16: 'favicon.ico',
   appleTouchIcon: 'favicon.ico',
   maskIcon: 'favicon.ico',
   msTileImage: 'favicon.ico'
  }
 },

修改完配置,别忘了,结束项目重新启动

vue3修改link标签默认icon无效问题详解

再次启动就会发现,icon图标就被我们替换过来了.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 #Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 #Javascript
解决Vue动态加载本地图片问题
Oct 09 #Javascript
Vue3 中的数据侦测的实现
Oct 09 #Javascript
vue3实现v-model原理详解
Oct 09 #Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 #Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 #Javascript
You might like
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
phpMyAdmin 安装及问题总结
2009/05/28 PHP
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
javascript动态控制服务器控件实例
2014/09/05 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
常见的python正则用法实例讲解
2016/06/21 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
python自动化发送邮件实例讲解
2021/01/04 Python
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
商务英语毕业生自荐信范文
2013/11/08 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
30岁生日感言
2014/01/25 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
员工规章制度范本
2015/08/07 职场文书
mysql sock 文件解析及作用讲解
2022/07/15 MySQL