vue3: 动态修改favicon(网站的ico 图标)(vue@3.2.26)
2023-09-14 09:01:18 时间
一,把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
相关文章
- Vue3源码02: 项目构建流程和源码调试方法
- 使用Vue3 + Vite + Pinia创建SPA
- vue前端怎么导出图片_VUE中将页面导出为图片或者PDF
- vue3解构赋值失去响应式引发的思考!
- 【玩转 Cloud Studio】记录Vue3+TS+Vite搭建教程
- Vue3表单输入绑定
- Vue(3)webstorm代码格式规范设置与vue模板配置
- vue报错cannot read property_vue3 ref 数组
- vue源码分析-从new Vue开始
- 我用前端【最新】技术栈完成了一个生产标准的项目【Vue3 + TS + Vite + Pinia + Windicss】
- Vue3学习笔记(一)——MVC与vue3概要、模板、数据绑定与综合示例
- Vue生成二维码_vue通过二维码分享
- vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」
- 【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
- 软件测试|Vue3 - 插槽 Slots
- vue3 + elemenplus实现导航栏
- Vue 实现前后端分离,安全连接 MSSQL 数据库(vue 连接mssql)
- Vue用Redis储存获取数据(vue获取redis)
- Vue实时监测Redis变化(vue监控redis变化)
- 从零开始Vue项目中使用Redis(vue使用redis)
- Vue中触发Redis订阅通知(vue中订阅redis)
- Oracle Vue网站助力网站创新,让你的网站飞起来(oracle vue网站)