vue3: 动态修改favicon(网站的ico 图标)(vue@3.2.26)
作者:互联网
一,把baidu的icon保存到本地:
在本地增加一个icon供测试用: 访问:https://www.baidu.com/favicon.ico
保存到public目录下,
名字保存为 faviconbd.ico说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,js代码:
Icon.vue<template> <div> <button @click="changeIco('bd')">修改为百度ico</button><br/> <button @click="changeIco('vue')">修改为Vue ico</button><br/> </div> </template> <script> export default { name: "Icon", setup () { //修改Favicon的方法 const changeFavicon = link => { let $favicon = document.querySelector('link[rel="icon"]'); if ($favicon !== null) { $favicon.href = link; } else { $favicon = document.createElement("link"); $favicon.rel = "icon"; $favicon.href = link; document.head.appendChild($favicon); } }; //根据传递的参数修改Favicon const changeIco = (type) => { // 得到图标地址 let iconUrl if (type=='bd') { iconUrl = `./faviconbd.ico` } else { iconUrl = `./favicon.ico` } changeFavicon(iconUrl); } return { changeIco, } } } </script> <style scoped> </style>
三,测试效果
原始状态 、使用vue的icon 点击 修改为百度ico后四,查看vue的版本:
liuhongdi@lhdpc:/data/vue/demo1$ npm list vue demo1@0.1.0 /data/vue/demo1 ├─┬ @vue/cli-plugin-babel@4.5.15 │ └─┬ @vue/babel-preset-app@4.5.15 │ └── vue@3.2.26 deduped ├─┬ element-plus@1.2.0-beta.6 │ ├─┬ @element-plus/icons-vue@0.2.4 │ │ └── vue@3.2.26 deduped │ ├─┬ @vueuse/core@7.4.1 │ │ ├─┬ @vueuse/shared@7.4.1 │ │ │ └── vue@3.2.26 deduped │ │ ├─┬ vue-demi@0.12.1 │ │ │ └── vue@3.2.26 deduped │ │ └── vue@3.2.26 deduped │ └── vue@3.2.26 deduped └─┬ vue@3.2.26 └─┬ @vue/server-renderer@3.2.26 └── vue@3.2.26 deduped
标签:26,vue,ico,favicon,3.2,deduped 来源: https://www.cnblogs.com/architectforest/p/15915569.html