亲宝软件园·资讯

展开

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

Wisdom0110 人气:0

Vue设置浏览器小图标

当我们使用浏览器做开发时,我们能希望浏览器标签页能显示自己的logo小图标,这个是怎样设置的呢?

第一步:准备logo图片信息

找到自己的logo,通过图片在线转换格式,转换成32*32ico为后缀的图片格式(推荐网站:图片在线转换工具(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()
})

总结

加载全部内容

相关教程
猜你喜欢
用户评论