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支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
将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
ftp类(example.php)
2006/10/09 PHP
php实现rc4加密算法代码
2012/04/25 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
详解Python中的循环语句的用法
2015/04/09 Python
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
Python正则表达式常用函数总结
2017/06/24 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
毕业生护理专业个人求职信范文
2014/01/04 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
教师个人学习总结
2015/02/11 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
人事聘任通知
2015/04/21 职场文书
毕业答辩开场白范文
2015/05/27 职场文书