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 相关文章推荐
xss文件页面内容读取(解决)
Nov 28 Javascript
潜说js对象和数组
May 25 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
js实现一个简单的MVVM框架示例
Jan 15 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
PHP的开合式多级菜单程序
2006/10/09 PHP
dedecms中常见问题修改方法总结
2007/03/21 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
零基础写python爬虫之神器正则表达式
2014/11/06 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
Python统计单词出现的次数
2018/04/04 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
生日派对邀请函
2014/01/13 职场文书
学子宴答谢词
2014/01/25 职场文书
2014年新生军训方案
2014/05/01 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android