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 相关文章推荐
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
javascript canvas检测小球碰撞
Apr 17 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 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
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
js如何验证密码强度
2020/03/18 Javascript
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
python实现单向链表详解
2018/02/08 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
模具专业自荐信
2014/05/29 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
病人慰问信范文
2015/02/15 职场文书
让生命充满爱观后感
2015/06/08 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书