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无效问题的更多相关文章

  1. 关于link标签的用法, 不声明rel=stylesheet则无效? 在ff中必须声明rel属性!

    void 无效的, 空的; invalid: 无效的, void 和 invalid 在表示无效的时候, 是一样的, 等同的 the treaty (条约) was declared invalid ...

  2. (学习笔记)HTML的<link>标签

    在HTML中<link>标签用于定义文档与外部资源的关系. <link>标签只存在于head部分. <head> <link rel="styles ...

  3. (转)Ratchet教程:meta与link标签

    原文:http://www.w3cplus.com/mobile/meta-and-link-tags-for-ratchet.html Ratchet教程:meta与link标签           ...

  4. Android Launcher分析和修改1——Launcher默认界面配置(default_workspace)

    最近工作都在修改Launcher,所以打算把分析源码和修改源码的过程记录下来,最近会写一些关于Launcher的分析和修改博文.因为我是修改4.0.3的Launcher,所以后面文章里面的Launch ...

  5. <link>标签的rel属性全解析

      <link>标签定义了当前文档与 Web 集合中其他文档的关系.link 元素是一个空元素,它仅包含属性.此元素只能存在于 head 部分,不过它可出现任何次数.在 HTML 中,&l ...

  6. 使用<link> 标签定义浏览器标题栏小图标

    使用link标签的rel属性,设置成icon.同时设置href属性值为小图标图片的url. <link rel=" icon " href="image/icon. ...

  7. html5手机网站需要加的那些meta/link标签,html5 meta全解

    原文链接:http://blog.csdn.net/kongjiea/article/details/17092413(收藏专用!如需转载,请点击链接,联系博主,获得同意后方可转载) 3.name之设 ...

  8. 【No.5 Ionic】修改 应用名,icon,启动界面

    修改 应用名 直接 修改 config.xml中的name 修改icon 和 启动界面 在resources目录有个 icon.png  和 splash.png 文件,直接把文件覆盖执行重新生成命令 ...

  9. 利用link标签rel="alternate stylesheet"属性实现界面动态换肤

    rel="stylesheet"属性指定将一个样式表立即应用到文档.rel="alternate stylesheet"属性将其作为备用样式表而在默认情况下禁用 ...

随机推荐

  1. 关于k8s集群证书1年过期后,使用kubadm重新生成证书及kubeconfig配置文件的变化

    这个证书很重要,不用说. 但手工生成证书,确实工作量大且容易出错. 推荐的方式,是保留/etc/kubernetes/pki目录下的ca.crt,ca.key,sa.crt,sa.key. 这四个文件 ...

  2. Flask框架入门(一)

    Flask诞生于2010年,是Armin ronacher(人名)用 Python 语言基于 Werkzeug 工具箱编写的轻量级Web开发框架. Flask 本身相当于一个内核,其他几乎所有的功能都 ...

  3. 【NodeJS】Vue-d2Admin

    INFO Starting development server... 10% building 2/2 modules 0 active ERROR Error: Watching remote f ...

  4. 莫烦TensorFlow_07 tensorboard可视化

    import tensorflow as tf import numpy as np import matplotlib.pyplot as plt def add_layer(inputs, in_ ...

  5. MySQL数据库的下载与安装

    1.百度:MySQL,点击MySQL官网 2. 进入官网后,点击DOWNLOADS,然后点击Windows 3.点击MySQL Installer 4.下载第二个MSI文佳,点击downloads 5 ...

  6. NOIP 2012 Vigenère 密码

    洛谷 P1079 Vigenère 密码 https://www.luogu.org/problemnew/show/P1079 JDOJ 1779: [NOIP2012]Vigenèr密码 D1 T ...

  7. Scrapy框架详解

    Python网络爬虫Scrapy框架研究 Scrapy1.0教程 Scrapy笔记(1)- 入门篇 Scrapy笔记(2)- 完整示例 Scrapy笔记(3)- Spider详解 Scrapy笔记(4 ...

  8. Shell编程——环境变量

    在Shell程序启动时会自动定义一组变量,这组变量就是环境变量,系统中的所有命令都可以使用这些变量参数. 1.如果在父Shell定义环境变量,在子Shell中也能查看到. (1)父Shell与子She ...

  9. ESP8266 SDK开发: 外设篇-GPIO输出高低电平

    前言 官方提供了两个函数 GPIO_OUTPUT_SET(gpio_no, bit_value) 设置GPIO2输出高电平 GPIO_OUTPUT_SET(2, 1); 设置GPIO2输出低电平 GP ...

  10. 关于gcd

    内容: \(gcd(a,b)=gcd(b,a\% b)\) 用途: 这不废话嘛,当然是用来求最大公约数啊 证明:(这还是四月份的时候cdx巨佬给我讲的qwq) 设\(d=gcd(a.b)\) 则有\( ...