Vue设置浏览器小图标(ICON)的详细步骤
作者:Wisdom0110 时间:2024-05-05 09:06:35
Vue设置浏览器小图标
当我们使用浏览器做开发时,我们能希望浏览器标签页能显示自己的logo小图标,这个是怎样设置的呢?
第一步:准备logo图片信息
找到自己的logo,通过图片在线转换格式,转换成32*32
的ico
为后缀的图片格式(推荐网站:图片在线转换工具(aconvert))
如下:
第二步:拷贝ico图片到项目中
将转换后的ico
格式的文件拷贝的vue项目的static
目录下
第三步:添加图片链接到index.html中
找到vue项目
根目录下的index.html
文件,在head标签里添加如下内容,其中favicon.ico
是的拷贝过来的图片名称:
<link rel ="shortcut icon" type="image/x-icon" href="static/favicon.ico" rel="external nofollow" rel="external nofollow" >
也可以在head里设置浏览器小图标右侧的标题信息
使用<title></title>
标签设置辩题信息注意:
这种添加标题的方式,仅适用于静态标题!
附完整的index.html信息,仅供参考:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel ="shortcut icon" type="image/x-icon" href="static/favicon.ico" rel="external nofollow" rel="external nofollow" >
<title>Activiti</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
到此,Vue设置浏览器小图标的简单教程已完结!
这是设置后的画面:
补充:修改浏览器名字设置
01.直接修改
这是刚创建最初的样子
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
这是直接修改成的名字
<title>
xx后台管理系统
</title>
02.根据后端的传值动态修改名字
先去axios请求拿到结果,然后在进行修改
document.title = '需要设置的值'
03.在vue中使用插件的方式
001. npm进行安装
npm vue-wechat-title --save
002.全局使用,在main.js中引入
import VueWechatTitle from 'vue-wechat-title' //可以动态修改浏览器标题的插件
Vue.use(VueWechatTitle);
003.在router中的index.js路由下设置mate属性
const routes = [
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
meta:{
title:'关于'
}
},
{
path: '/test',
name: 'Test',
component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue'),
meta:{
title:'测试'
}
},
]
004.在APP.vue使用vue-wechat-title插件
<router-view v-wechat-title="$route.meta.title"/>
04.路由守卫中进行修改
router
const routes = [
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
meta:{
title:'关于'
}
},
{
path: '/test',
name: 'Test',
component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue'),
meta:{
title:'测试'
}
},
]
路由守卫
router.beforeEach((to, form, next) => {
if (to.meta.title) {
document.title = to.meta.title
} else {
document.title = '默认标题' //此处写默认的title
}
next()
})
来源:https://blog.csdn.net/qq_42320934/article/details/127665202
标签:vue,浏览器,小图标
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python目标检测基于opencv实现目标追踪示例
2022-05-10 13:12:30
![](https://img.aspxhome.com/file/2023/9/96459_0s.gif)
使用Django和Postgres进行全文搜索的实例代码
2022-07-06 10:52:15
Python OpenCV实现图形检测示例详解
2023-05-23 15:36:39
![](https://img.aspxhome.com/file/2023/8/103498_0s.jpg)
python数组处理之最值与下标问题
2023-06-01 12:13:27
python selenium 查找隐藏元素 自动播放视频功能
2022-03-01 18:54:14
![](https://img.aspxhome.com/file/2023/4/134794_0s.png)
如何在SQL Server 2005数据库中导入SQL Server 2008的数据
2024-01-27 22:05:21
BootStrap数据表格实例代码
2024-05-09 14:56:15
VSCode Python开发环境配置的详细步骤
2021-06-15 23:29:15
![](https://img.aspxhome.com/file/2023/9/126929_0s.jpg)
用JS访问操作iframe框架里的dom
2008-11-10 13:05:00
![](https://img.aspxhome.com/file/UploadPic/200811/10/1-55s.gif)
如何建设一个多语言版的ASP网站?
2009-11-26 20:36:00
pycharm 如何缩进和SQL乱码及SQL包含变量
2021-05-19 04:43:24
![](https://img.aspxhome.com/file/2023/9/103699_0s.jpg)
Vue Router中应用中间件的方法
2024-05-09 10:42:43
![](https://img.aspxhome.com/file/2023/6/126626_0s.jpg)
python枚举类型定义与使用讲解
2021-04-11 08:55:42
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2022-07-07 17:14:01
js中如何对url进行编码和解码
2023-07-22 03:45:08
使用php+swoole对client数据实时更新(一)
2024-05-03 15:13:08
python3+selenium自动化测试框架详解
2022-01-29 18:26:01
![](https://img.aspxhome.com/file/2023/7/75897_0s.png)
Go语言单元测试模拟服务请求和接口返回
2024-04-23 09:41:13
python本地文件服务器实例教程
2022-07-31 16:38:17
![](https://img.aspxhome.com/file/2023/7/64607_0s.jpg)
Python利用百度地图获取两地距离(附demo)
2022-10-18 23:21:33
![](https://img.aspxhome.com/file/2023/5/117355_0s.jpg)