Nuxt 按页面更改图标

Question

在某些情况下，某些路线需要不同的图标。我试过将这段代码放在头部，虽然它确实有效，但它在前一个图标下方添加了另一个图标，并且不会覆盖它。

page.vue:

head () {
    return {
        title: 'my website title',
        link: [{
            rel: 'icon', type: 'image/x-icon', href: 'https://s.yimg.com/rz/l/favicon.ico'
        }]
    }
}

<link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
<link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://s.yimg.com/rz/l/favicon.ico">

如何覆盖网站图标？

Answer 1

我觉得这个link可以帮到你

https://reactgo.com/nuxt-change-favicon/

在您喜欢的代码编辑器中打开 nuxt 应用程序。
导航到静态文件夹并删除 favicon.ico 文件。
现在，在静态文件夹中添加一个新的网站图标。
重新加载您的 nuxt 应用程序以查看新的图标。

Answer 2

将 hid 添加到 nuxt.config.js 中的图标：

link: [{
    hid: 'icon',
    rel: 'icon',
    type: 'image/x-icon',
    href: 'link-to-fallback-favicon.png'
}]

您现在可以使用相同的 hid 在页面 head 方法中覆盖它：

head()
    return {
        link: [{
        hid: 'icon',
        rel: 'icon',
        type: 'image/x-icon',
        href: 'link-to-new-favicon.png'
}]

Nuxt 将在您导航到该页面后自动覆盖，并在您导航离开时使用 nuxt.config.js 中的通用一次。

Nuxt 按页面更改图标

Nuxt change favicon by page

html

favicon

nuxt.js