Vue设置浏览器小图标(ICON)的详细步骤

更新时间：2023年01月03日 11:18:14 作者：Wisdom0110

vue中网页图标默认使用的是vue自带的一个icon的图标,也是vue的logo,下面这篇文章主要给大家介绍了关于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(/* 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()
})

总结

到此这篇关于Vue设置浏览器小图标(ICON)的文章就介绍到这了,更多相关Vue设置浏览器小图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3父子组件传值中props使用细节浅析
这篇文章主要给大家介绍了关于vue3父子组件传值中props使用细节的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-03-03
Vue中Mixin&extends的详细使用教程
vue提供了mixin、extends配置项,最近使用中发现很好用,下面这篇文章主要给大家介绍了关于Vue中Mixin&extends的详细使用方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-02-02
Vue2.0 事件的广播与接收(观察者模式)
这篇文章主要介绍了Vue2.0 事件的广播与接收(观察者模式)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
详解vue+nodejs获取多个表数据的方法
这篇文章主要为大家介绍了vue+nodejs获取多个表数据的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
vue3组合式API获取子组件属性和方法的代码实例
这篇文章主要为大家详细介绍了vue3组合式API获取子组件属性和方法的代码实例,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-01-01
Vue input输入框中的值如何变成黑点问题
这篇文章主要介绍了Vue input输入框中的值如何变成黑点问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
Vue3 编写自定义指令插件的示例代码
这篇文章主要介绍了Vue3 编写自定义指令插件的示例代码,主要包括编写自定义插件，在 main.ts 中加载启用插件的代码介绍，对Vue3自定义指令插件相关知识感兴趣的朋友一起看看吧
2022-07-07
Vue.js中使用道具方法demo
这篇文章主要为大家介绍了Vue.js中使用道具方法demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
npm ERR! code E404在vscode安装插件时报错的两种解决方案
这篇文章主要给大家介绍了关于npm ERR! code E404在vscode安装插件时报错的两种解决方案,关于这个问题,通常是由于插件名称输入错误、网络问题或插件已被删除引起的,文中将两种解决方法都介绍的非常详细,需要的朋友可以参考下
2023-04-04
Vue内存泄漏的识别和解决方案
Vue是人气爆棚且地表最强的JS（JavaScript）框架,祂允许我们构建动态交互式的Web App,然但是,和任何软件雷同,Vue App偶尔会遭遇内存泄漏,导致性能暴跌和意外行为,今天,我们将深入Vue App内存泄漏的原因,并探讨识别和修复这些问题的锦囊妙计
2023-11-11