Vue设置浏览器小图标(ICON)的详细步骤
Wisdom0110 人气:0Vue设置浏览器小图标
当我们使用浏览器做开发时,我们能希望浏览器标签页能显示自己的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() })
总结
加载全部内容