nuxt框架及vue-cli框架如何动态更换页签图标

nuxt动态更换页签图标

1.在nuxt中config可以配置静态ico
nuxt的config只在项目启动阶段生效，是配置，一次性的。

module.exports = {
  head: {
    title: 'xxx'
    link: [
      {
        rel: 'icon',
        type: 'image/x-icon',
        href: '/favicon.ico'
      }
    ]
   }

如果你要动态的修改icon，那你就在ssr的时候，用fetch或者asyncData属性在页面的head hooks里设置即可，建议查看nuxt的head说明:www.nuxtjs.cn,但是我发现在切换路由的过程中每个页面都需要请求一次图片,操作繁琐

后来思考可以在nuxt添加中间件,在router每次的周期中自动操作

import { getLogoImg } from '@/model/entity/content'

export default async function ({ app }) {
  try {
    const res = await getLogoImg()
    let link = app.head.link
    if (link.length == 0) {
      link.push({
        rel: 'icon',
        href: res.data?.filePath || '/favicon.ico',
        type: 'image/x-icon'
      })
    } else {
      link.find((item, index) => {
        if (item.rel == 'icon') {
          link[index] = {
            rel: 'icon',
            href: res.data?.filePath || '/favicon.ico',
            type: 'image/x-icon'
          }
        }
      })
    }

    app.head.link = link
  } catch (error) {}
}



//nuxt.config.js
module.exports = {
  router: {
    middleware: ['linkIcon']
    // mode:'hash'
  },
}

普通vue框架更改页签icon

在根目录的App.vue中请求数据
将link[rel=‘icon’]的herf进行替换就可以了

  methods: {
    getLogoFun() {
      content.getLogoImg().then(res => {
        this.headerLogo = res.data?.filePath
        let relIcon = document.head.querySelector("link[rel='icon']")
        relIcon.href = this.headerLogo
      })
    }
  },
  created() {
    console.log(process.env)
    this.getLogoFun()
  }
}