vue3: 動態修改favicon(網站的ico 圖標)(vue@3.2.26)

一，把baidu的icon保存到本地:

在本地增加一個icon供測試用:

訪問:

https://www.baidu.com/favicon.ico

保存到public目錄下，

名字保存為 faviconbd.ico

說明：劉宏締的架構森林是一個專注架構的博客，

網站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/06/01/vue3-dong-tai-xiu-gai-favicon-wang-zhan-de-ico-tu-biao-vue/

         對應的源碼可以訪問這里獲取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

說明：作者:劉宏締 郵箱: [e-mail]

二，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