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中进行,不会的请看历史文章,有个介绍vue-config.js的配置介绍):

pwa里面有个iconPaths这个选项可以用来替换地址,官网没有详细说明,在gitHup上有介绍----点击去PWA配置

pwa:{
  iconPaths:{
   favicon32: 'favicon.ico',
   favicon16: 'favicon.ico',
   appleTouchIcon: 'favicon.ico',
   maskIcon: 'favicon.ico',
   msTileImage: 'favicon.ico'
  }
 },

修改完配置,别忘了,结束项目重新启动

再次启动就会发现,icon图标就被我们替换过来了.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解关于vue-area-linkage走过的坑

    详解关于vue-area-linkage走过的坑

    最近写的项目是vue框架,搭配element-ui框架.这个框架上手快,而且页面的大部分样式都有现成的可以用,使用起来比较方便.前几天有一个需求是要写省市区联动选择,上网搜罗了一遍之后发现了vue-area-linkage这个插件,应该是专门为vue准备的插件,下面开始介绍这个插件的使用方法. 官网介绍的很详细了,我就不赘述了vue-area-linkage 安装及使用方法. 插件使用之后的样子 下面开始介绍遇到的坑以及解决办法: 1.样式问题: 这个问题比较好解决,去到依赖包中,查找css文件

  • 详解vue中router-link标签所必备了解的属性

    to 表示目标路由的链接. 当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象. <!-- 字符串 --> <router-link to="home">Home</router-link> <!-- 渲染结果 --> <a href="home" rel="external nofollow" >Home</a

  • Vue 页面跳转不用router-link的实现代码

    1.给父页面跳转的地方设置事件 //原来的页面上展示的信息 <div v-if="!addShow" class="function"> <el-row> <template slot-scope="scope"> <el-button type="success" size="mini" @click="handleEdit(scope.$index,

  • Vue使用vue-area-linkage实现地址三级联动效果的示例

    很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果: 1.安装vue-area-linkage插件:npm install --save vue-area-linkage --registry=https://registry.npm.taobao.org --verbose 2.在main.js上进行依赖注入,如下图所示: 3.在对应vue文件的template模板上写

  • vue router-link传参以及参数的使用实例

    vue router-link传参以及参数的使用实例

    1.路径:http://localhost:8081/#/test?name=1 <router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>(id是参数) 使用:this.$route.query.id 2.路径:http://localhost:8081/#/test/1 <router-link :to="'/test/'+id">跳转</ro

  • 详解vue-router 2.0 常用基础知识点之router-link

    前端采用前后端分离的方式进行开发,我们使用vue2.0框架,做单页面应用难免会用到vue-router,今天把项目中的用到router-link摘出来,一是想整理一下这些用法,方便下次快速查找,二是重新再过一下vue-router,增加熟悉度.也希望下面这些例子能帮到其他使用vue-router的朋友. 1,$route.params 类型: Object 一个 key/value 对象,包含了 动态片段 和 全匹配片段,如果没有路由参数,就是一个空对象. path: '/detail/:id'

  • vue.js默认路由不加载linkActiveClass问题的解决方法

    vue.js默认路由不加载linkActiveClass问题的解决方法

    发现问题 最近在打开项目的时候,发现我的默认路由没加载上linkActiveClass, 网上一搜,发现很多同学也有这个问题,查了一些资料发现这是个重定向的问题,官网文档是这么写的 https://router.vuejs.org/zh-cn/essentials/redirect-and-alias.html 重定向 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new VueRouter({ routes: [ { path:

  • vue3修改link标签默认icon无效问题详解

    vue3修改link标签默认icon无效问题详解

    vue3修改link中标签默认icon,vue3初次使用的时候不好好阅读配置难免会遇到一些坑,本人在项目完结的时候打算把浏览器的导航小icon图标给替换了,可是并没有那么顺利,那么如何在vue3中替换默认的icon(favicon.ico)的导航栏图标呢: public的index.html有这么一句话,毫无疑问,一看给人的感觉就是在这个位置替换了 而且favicon.ico也是小图标,于是我直接替换,发现并不生效(特殊情况),把<%= BASE_BA %>直接改成./发现也不生效,怎么回事呢

  • JavaScript React如何修改默认端口号方法详解

    问题 我们在使用React的时候经常会遇到这种情况,3000端口号被占用.有时候可以关掉3000端口,但更多时候,我们需要打开多个项目的时候,就必须要开启多个端口了.这时候就需要修改默认端口号了. 解决办法 修改默认端口号 具体做法 第一步:找到start.js文件 这个文件的位置在:node_modules文件夹下 -> react-scripts文件夹下 -> scripts文件夹下 -> start.js node_modules下 start.js文件 51行处修改,整个文件端口

  • vue3中的透传attributes教程示例详解

    vue3中的透传attributes教程示例详解

    目录 引言 绑定样式 对象 数组 透传的attributes 透传 attributes 之样式绑定 透传 attributes 之事件绑定 特殊1:组件嵌套 特殊2:禁用透传attributes 特殊3:在 javascript 中访问透传的attributes 总结 引言 最近两年都是在使用 react 进行项目开发,看技术博客都是针对 react 和 javaScript 高级方面的,对 vue 的知识基本上遗忘的差不多了.最近开始慢慢回顾 vue 的知识以及对新的语法进行学习,为后面的计

  • C++类中六个默认的成员函数详解

    C++类中六个默认的成员函数详解

    浅谈 先来说一下"this指针": C++中通过引入this指针解决该问题,暨:C++编译器给每个"非静态的成员函数"增加了一个隐藏的指针参数,让该指针指向当前对象(函数运行时调用该函数的对象),在函数体中所有成员变量的操作,都是通过该指针去访问,只不过所有的操作对用户是透明的,暨用户不需要来传递,编译器自动完成. 说了这么多其实编译器在生成程序时获取对象首地址的信息.然后将获取的对象的首地址存放在了寄存器中,成员函数的其它参数都是存放在栈中.而this指针参数则是

  • Java8新特性之接口中的默认方法和静态方法详解

    一.前言 Java 8 引入了默认方法以及可以在接口中定义的静态方法. 默认方法是一个普通的 java 方法,但以 default 关键字开头,静态方法像往常一样用 static 关键字声明. 二.为什么在 Java 接口中使用默认方法? 为什么java在接口中引入了默认方法. 假设一个拖拉机制造公司发布了操作拖拉机的标准接口,如如何挂挡或停车等. 开发者已经开发了不同类型的拖拉机来实现标准的拖拉机接口. 如果公司在其标准接口中增加了新的功能,如如何跳动拖拉机? 开发者需要对他们的类进行修改以定

  • Vue3中Vuex状态管理学习实战示例详解

    目录 引言 一.目录结构 二.版本依赖 三.配置Vuex 四.使用Vuex 引言 Vuex 是 Vue 全家桶重要组成之一,专为 Vue.js 应用程序开发的 状态管理模式 + 库 ,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 一.目录结构 demo/ package.json vite.config.js index.html public/ src/ api/ assets/ common/ components/ store/ index.

  • vue3中vue.config.js配置及注释详解

    vue3中vue.config.js配置及注释详解

    目录 报错 打包时提示文件过大,配置解决方案,如下 总结 报错 asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).This can impact web performance.entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit

  • Flutter Widgets之标签类控件Chip详解

    Flutter Widgets之标签类控件Chip详解

    目录 概述: RawChip Chip InputChip ChoiceChip FilterChip 总结: 概述: Flutter 标签类控件大全ChipFlutter内置了多个标签类控件,但本质上它们都是同一个控件,只不过是属性参数不同而已,在学习的过程中可以将其放在放在一起学习,方便记忆. RawChip Material风格标签控件,此控件是其他标签控件的基类,通常情况下,不会直接创建此控件,而是使用如下控件: Chip InputChip ChoiceChip FilterChip

  • vue3调度器effect的scheduler功能实现详解

    目录 一.调度执行 二.单元测试 三.代码实现 四.回归实现 五.结语 一.调度执行 说到scheduler,也就是vue3的调度器,可能大家还不是特别明白调度器的是什么,先大概介绍一下. 可调度性是响应式系统非常重要的特性.首先我们要明确什么是可调度性.所谓可调度性,指的是当trigger 动作触发副作用函数重新执行时,有能力决定副作用函数执行的时机.次数以及方式. 有了调度函数,我们在trigger函数中触发副作用函数重新执行时,就可以直接调用用户传递的调度器函数,从而把控制权交给用户. 举

  • 对python修改xml文件的节点值方法详解

    这是我的xml文件结构 <?xml version='1.0' encoding='utf-8'?> <annotation> <folder>JPEGImages</folder> <filename>train_2018-05-08_1000.jpg</filename> <path>D:\all_data\2018-05-08\JPEGImages\train_2018-05-08_1000.jpg</path

随机推荐