Vue设置浏览器小图标(ICON)的详细步骤
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( '../views/About.vue'),
meta:{
title:'关于'
}
},
{
path: '/test',
name: 'Test',
component: () => import( '../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( '../views/About.vue'),
meta:{
title:'关于'
}
},
{
path: '/test',
name: 'Test',
component: () => import( '../views/Test.vue'),
meta:{
title:'测试'
}
},
]
路由守卫
router.beforeEach((to, form, next) => {
if (to.meta.title) {
document.title = to.meta.title
} else {
document.title = '默认标题' //此处写默认的title
}
next()
})
总结
到此这篇关于Vue设置浏览器小图标(ICON)的文章就介绍到这了,更多相关Vue设置浏览器小图标内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
