vue3修改link标签默认icon无效问题
vue3修改link中标签默认icon,vue3初次使用的时候不好好阅读配置难免会遇到一些坑,本人在项目完结的时候打算把浏览器的导航小icon图标给替换了,可是并没有那么顺利,那么如何在vue3中替换默认的icon(favicon.ico)的导航栏图标呢:
public的index.html有这么一句话,毫无疑问,一看给人的感觉就是在这个位置替换了
而且favicon.ico也是小图标,于是我直接替换,发现并不生效(特殊情况),把<%= BASE_BA %>直接改成./发现也不生效,怎么回事呢?
我们顺着问题进行查找,f12打开浏览器调试台查看结构中的icon link href指向
居然多了这么多图标地址,还是看官方配置吧,原来是忽略了pwa这个配置(该配置在vue.config.js中进行,这个地方将favicon.ico换成自己的图标地址即可):
pwa:{
iconPaths:{
favicon32: 'favicon.ico',
favicon16: 'favicon.ico',
appleTouchIcon: 'favicon.ico',
maskIcon: 'favicon.ico',
msTileImage: 'favicon.ico'
}
},
配置完毕,项目重启,图标就换成我们自己的了
vue3修改link标签默认icon无效问题的更多相关文章
- 关于link标签的用法, 不声明rel=stylesheet则无效? 在ff中必须声明rel属性!
void 无效的, 空的; invalid: 无效的, void 和 invalid 在表示无效的时候, 是一样的, 等同的 the treaty (条约) was declared invalid ...
- (学习笔记)HTML的<link>标签
在HTML中<link>标签用于定义文档与外部资源的关系. <link>标签只存在于head部分. <head> <link rel="styles ...
- (转)Ratchet教程:meta与link标签
原文:http://www.w3cplus.com/mobile/meta-and-link-tags-for-ratchet.html Ratchet教程:meta与link标签 ...
- Android Launcher分析和修改1——Launcher默认界面配置(default_workspace)
最近工作都在修改Launcher,所以打算把分析源码和修改源码的过程记录下来,最近会写一些关于Launcher的分析和修改博文.因为我是修改4.0.3的Launcher,所以后面文章里面的Launch ...
- <link>标签的rel属性全解析
<link>标签定义了当前文档与 Web 集合中其他文档的关系.link 元素是一个空元素,它仅包含属性.此元素只能存在于 head 部分,不过它可出现任何次数.在 HTML 中,&l ...
- 使用<link> 标签定义浏览器标题栏小图标
使用link标签的rel属性,设置成icon.同时设置href属性值为小图标图片的url. <link rel=" icon " href="image/icon. ...
- html5手机网站需要加的那些meta/link标签,html5 meta全解
原文链接:http://blog.csdn.net/kongjiea/article/details/17092413(收藏专用!如需转载,请点击链接,联系博主,获得同意后方可转载) 3.name之设 ...
- 【No.5 Ionic】修改 应用名,icon,启动界面
修改 应用名 直接 修改 config.xml中的name 修改icon 和 启动界面 在resources目录有个 icon.png 和 splash.png 文件,直接把文件覆盖执行重新生成命令 ...
- 利用link标签rel="alternate stylesheet"属性实现界面动态换肤
rel="stylesheet"属性指定将一个样式表立即应用到文档.rel="alternate stylesheet"属性将其作为备用样式表而在默认情况下禁用 ...
随机推荐
- 2020年第二期《python接口自动化+测试开发》课程,已开学!
2020年第二期<python接口自动化+python测试开发>课程,12月15号开学! 主讲老师:上海-悠悠 上课方式:QQ群视频在线教学,方便交流 本期上课时间:12月15号-3月29 ...
- 201871010118-唐敬博 《面向对象程序设计(java)》第十五周学习总结
博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 <https://www.cnblogs.com/nwnu-daizh/> 这个作业的要求在哪里 <https://ww ...
- 多线程(四)多线程同步_Critical Section临界区
临界区是指一个小代码段,在代码能够执行前,它必须独占对某些共享资源的访问权.和使用mutex一样,它们都是以原子操作方式来对共享资源进行访问. 临界区又叫关键代码段,与上一篇的mutex互斥体实现的功 ...
- nginx geoip_module 地域信息读取
1.安装geoip yum -y install nginx-module-geoip 2.安装完成后在cd /etc/nginx/modules/ 能看到安装的模块 # cd /etc/nginx/ ...
- 【Kafka】Windows环境配置测试
一.配置 1.Java配置:JAVA_HOME路径不要有空格 2.下载/kafka_2.11-1.1.0,地址是https://www.apache.org/dyn/closer.cgi?path=/ ...
- 生产者和消费者模型producer and consumer(单线程下实现高并发)
#1.生产者和消费者模型producer and consumer modelimport timedef producer(): ret = [] for i in range(2): time.s ...
- JDOJ 1775: 求N!中0的个数
JDOJ 1775: 求N!中0的个数 JDOJ传送门 Description 求N!结果中末尾0的个数 N! = 1 * 2 * 3 ....... N Input 输入一行,N(0 < N ...
- mysql select limit 大数据量查询 性能终极提升方法
还是广告位 我们的使用mysql的时候总是想当然的使用 select × from tables where a>0 order by id desc limit 500000,200 当我们真 ...
- Python进阶-VII 内置函数
一.内置函数引入 我们已经了解的有; print() input() range() next() dir() str() int() list() set() tuple() dict() he ...
- js toFixed() 四舍五入后并不是你期望的结果
小学的时候学数学就知道有一种叫四舍五入的计算方式,就是对于小数位数的取舍,逢五进一,比如1.225 取两位小数后就是1.23.在前端开发中自己也少不了这样的计算,js也提供了相关的方法--toFixe ...