vue项目 设置浏览器地址栏图标及名称

在vue项目中,怎样设置浏览器tab图标及名称呢?

在这里插入图片描述

方案一

1.静态配置vue项目ico

1.1将需要展示的ico放到项目文件中

在这里插入图片描述
1.2在项目根目录public文件中的index.html添加如下代码

<link rel="icon" href="<%= BASE_URL %>favicon.ico" />

二.动态配置网站ico

//动态设置就在拿到数据之后调用这个方法
getCreate(url){var link= document.querySelector("link[rel*='icon']") || document.createElement('link');link.type = 'image/x-icon';link.rel = 'shortcut icon';link.href = 'ico文件的url' document.getElementsByTagName('head')[0].appendChild(link);
},

方案二

项目根目录下 没有 public文件夹 时,
我们来看vue项目的目录结构,根目录下有一个index.html,这个就相当于我们普通项目中的各个html页面文件,所以设置方法就是在index.htmlhead标签中添加link标签
在这里插入图片描述
在这里要注意的是图标文件的位置,不能放到src里,这样的路径会让浏览器找不到。网页把根域名作为相对路径的根目录了,然而我们文件的路径是相对于项目文件的根目录的,因此就找不到了。

因此,图片一类的静态文件,应该放在这个static文件夹下,这个文件夹下的文件(夹)会按照原本的结构放在网站根目录下。这时我们再去使用/static绝对路径,这样就可以访问这些静态文件了。所以推荐将项目中的静态文件放到static文件夹下

favicon.ico的图标文件放到static文件夹内,在index.html的head中添加:

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/ed6fca8b984149439f3bf68c54878622.png)

保存并刷新浏览器,看浏览器图标已经正确设置上了。设置后图标在测试环境、生产环境(打包后)都正常显示。

Tips: 注意,此处有坑,下面为测试环境有效,生产环境不生效配置,因为打包后目录变了,找不到src里面的路径了!!!

build文件夹
找到webpack.dev.conf.js,再找到HtmlWebpackPlugin,添加favicon:‘favicon.ico路径’,

new HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',favicon:'./favicon.png', //这里设置图标路径inject: true})

然后找到webpack.prod.conf.js,再找到HtmlWebpackPlugin,添加favicon:‘favicon.ico路径’

new HtmlWebpackPlugin({filename: config.build.index,template: 'index.html',favicon: './favicon.png', //这里设置图标路径inject: true,minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true// more options:// https://github.com/kangax/html-minifier#options-quick-reference}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/797204.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

联邦学习目前面临的挑战以及解决方案

学习目标&#xff1a; 联邦学习目前面临的挑战以及解决方案 学习内容&#xff1a; 联邦学习是一种新兴的人工智能基础技术&#xff0c;它在保障大数据交换时的信息安全、保护终端数据和个人数据隐私、保证合法合规的前提下&#xff0c;在多参与方或多计算结点之间开展高效率的…

224.0.0.1到224.0.0.9的IP地址

224.0.0.1到224.0.0.9的IP地址属于D类组播地址&#xff0c;具体含义如下&#xff1a; 224.0.0.1&#xff1a;代表本子网中的所有系统&#xff08;All Systems on this Subnet&#xff09;&#xff0c;用于向该子网上的所有主机包括路由器发送信息。224.0.0.2&#xff1a;代表本…

什么是TLB

TLB&#xff0c;全称为Translation Lookaside Buffer&#xff0c;即旁路转换缓冲或地址转换后备缓冲&#xff0c;用于加速虚拟地址到物理地址的转换过程。它是访问速度比内存快很多的高速缓存&#xff0c;用于存放最近访问的页表项的副本。在现代计算机系统中&#xff0c;使用虚…

Java 组合模式

Java设计模式 - 组合模式 组合模式是结构型模式&#xff0c;因为它创建了一组对象的树结构。 组合模式将一组对象视为单个对象。 组合模式使用一个类来表示树结构。 在组合模式中&#xff0c;我们创建一个包含自己对象的类的组。 例子 以下代码使用Employee类来演示组合模…

(学习日记)2024.04.03:UCOSIII第三十一节:信号量函数接口讲解

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…

c++的学习之路:13、vector(2)

本章主要是模拟实现vector&#xff0c;文章末附上代码&#xff0c;和源码。 目录 一、STL源码 二、构造与析构 三、迭代器与【】、size、capacity、empty 四、reserve与resize 五、push_back与pop_back 六、insert与erase 七、测试 1 八、代码 九、思维导图 一、STL源…

FJSP:蜣螂优化算法( Dung beetle optimizer, DBO)求解柔性作业车间调度问题(FJSP),提供MATLAB代码

一、柔性作业车间调度问题 柔性作业车间调度问题&#xff08;Flexible Job Shop Scheduling Problem&#xff0c;FJSP&#xff09;&#xff0c;是一种经典的组合优化问题。在FJSP问题中&#xff0c;有多个作业需要在多个机器上进行加工&#xff0c;每个作业由一系列工序组成&a…

2024.4.3-day08-CSS 盒子模型(溢出显示、伪元素)

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; 文章目录 作业 2024.4.3-学习笔记css溢出显示单行文本溢出显示省略号多行文本溢出显示省…

多态.Java

&#xff08;1&#xff09;什么是多态&#xff1f; 同类型的对象&#xff0c;表现出不同的形态。前者指父类&#xff0c;后者指不同的子类 说简单点&#xff0c;就是父类的同一种方法&#xff0c;可以在不同子类中表现出不同的状态&#xff0c;或者说在不同子类中可以实现不同…

UVA247 Calling Circles 解题报告

UVA247 Calling Circles 解题报告 题目链接 https://vjudge.net/problem/UVA-247 题目大意 如果两个人相互打电话&#xff08;直接或间接&#xff09;&#xff0c;则说他们在同一个电话圈里。例如&#xff0c;a打给b&#xff0c;b打给c&#xff0c;c打给d&#xff0c;d打给a…

10.java openCV4.x 入门-特殊的Mat类汇总(二)

专栏简介 &#x1f492;个人主页 &#x1f4f0;专栏目录 点击上方查看更多内容 &#x1f4d6;心灵鸡汤&#x1f4d6;我们唯一拥有的就是今天&#xff0c;唯一能把握的也是今天建议把本文当作笔记来看&#xff0c;据说专栏目录里面有相应视频&#x1f92b; &#x1f9ed;文…

原型设计模式的学习

哪位大佬帮我看看关于“原型设计模式”的问题 写作原因&#xff1a; 我需要了解原型模式&#xff0c;但网上的说法是&#xff1a;通过一个clone方法来创建对象。然而&#xff0c;这并没有解答关于“效率”的问题&#xff1a; 以下是以怪物游戏和深拷贝为例来说明的&#xff1a;…

Linux 常用指令及其理论知识

个人主页&#xff1a;仍有未知等待探索-CSDN博客 专题分栏&#xff1a;http://t.csdnimg.cn/Tvyou 欢迎各位指教&#xff01;&#xff01;&#xff01; 目录 一、理论知识 二、基础指令 1、ls指令&#xff08;列出该目录下的所有子目录和文件&#xff09; 语法&#xff1a; …

论文阅读——Sat2Vid

Sat2Vid: Street-view Panoramic Video Synthesis from a Single Satellite Image 提出了一种新颖的方法&#xff0c;用于从单个卫星图像和摄像机轨迹合成时间和几何一致的街景全景视频。 即根据单个卫星图像和给定的观看位置尽可能真实地、尽可能一致地合成街景全景视频序列。…

Docker中Mysql报 mbind: Operation not permitted

问题 我们在docker中安装的mysql运行时报 mbind: Operation not permitted mbind: Operation not permitted mbind: Operation not permitted mbind: Operation not permitted mbind: Operation not permitted mbind: Operation not permitted原因 这是Docker的Seccomp安全限…

[leetcode] 25. K 个一组翻转链表

给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。 你不能只是单纯的改变节点内部的值…

MySQL(目录)

作者&#xff1a;码农出击 链接&#xff1a;https://www.zhihu.com/question/632989513/answer/3312494291 来源&#xff1a;知乎 著作权归作者所有。 MySQL数据库&#xff08;7天~15天&#xff09; 1、数据存储引擎&#xff1a;InnoDB、myISAM、Memory 2、数据库索引类型及原…

最好用的安卓按钮(3)

属性解释 按钮文字 app:text“床前明月光” 按钮文字颜色 app:textColor“color/color_white” 按钮文字大小 app:textSize“22sp” 按钮背景颜色 app:color_normal“color/color_accent” 0x2 单独设置每个圆角 效果 代码 <top.androidman.SuperButton android:layo…

替换空格(替换特定字符)

&#x1f600;前言 在字符串处理中&#xff0c;经常会遇到需要替换特定字符的情况。本文将介绍一道经典的字符串替换问题&#xff1a;将字符串中的空格替换成 “%20”。我们将探讨一种高效的解决方法&#xff0c;通过倒序遍历字符串来实现原地替换&#xff0c;避免额外空间的开…

也说说Sybase ASE中的空间膨胀及应对方案

前言 直观来讲,数据库是典型的以空间换时间的思路去提高数据检索的效率。我们先把数据“入”进去,组织好,建好索引,都为了什么?相当大一部分只不过是为了最终能快速得到查询的结果。当然这又引发了好多子项,比如,怎么“入”得快而又不发生冲突,怎么在相对少的资源的情…