vue-head 插件设置浏览器顶部 favicon 图标 - 动态管理 html 文档头部标签内容

目录

• 需求
• 实现1
• • 1. 安装插件
  • 2. 项目内 main.js 引入
  • 3. vue页面使用
  • 实现2
  • 其他

    需求

    vue项目中浏览器页面顶部图标可配置

    

    实现1

    使用 vue-head 插件实现

    • vue-head 插件可实现 html 文档中 head 标签中的内容动态配置（npm 官网 vue-head 插件）

    1. 安装插件

    npm install vue-head --save
    

    2. 项目内 main.js 引入

    import VueHead from 'vue-head'
    Vue.use(VueHead)
    

    3. vue页面使用

    我所有页面（所有路由）都用这个图标，因为 vue 项目是 SPA，只有一个页面，所以我在 APP.vue 使用

    如果有不同路由展示不同图标的需求，则可在不同路由对应的 vue 文件中单独配置 head。

    实现2

    使用原生 js 给图标标签 link 的图片地址 href 重新赋值

    // 新的图标地址 iconUrl
    document.querySelectAll("link[rel*='icon']").forEach(item => {
      item.href = iconUrl; // 赋值新的图标地址 iconUrl
    })
    // 或
    const dom = document.getElementById("favicon")
    dom && (dom.href = iconUrl) // 赋值新的图标地址 iconUrl
    

    其他

    npm 官网 vue-head