如何覆盖 Nuxt 中特定模板中的全局元标记？答案

【问题标题】：How to override global meta tags in a specific template in Nuxt?如何覆盖 Nuxt 中特定模板中的全局元标记？
【发布时间】：2021-09-12 15:22:12
【问题描述】：

我不确定这是否可能，但它来了。

我有一个 nuxt.config.js 之类的（为了隐私，我更改了一些内容和 href 属性等信息）：

head: {
    htmlAttrs: {
      lang: 'de-DE'
    },
    title: 'My Title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'My Content.' },
    ],
    link: [
      { rel: 'icon', type: 'image/png', href: '/images/icons/favicon.png' },
      { rel: 'preload', as: 'style', onload: "this.onload=null;this.rel='stylesheet'", href: 'mycss' },
      { rel: 'preload', as: 'style', onload: "this.onload=null;this.rel='stylesheet'", href: 'mycss' },
      { rel: 'dns-prefetch', href: 'https://www.google-analytics.com' }
    ]
  }

如您所见，我有两个预加载链接标签，其中包括 onload。我正在为 SEO 做一些 AMP 页面，而 AMP 给出了 onload 错误。

属性“onload”可能不会出现在标签“link rel=preload”中

所以我只想在我的 AMP 页面中覆盖这些链接标签。我尝试的是让我的 AMP 页面覆盖全局设置的 head() 函数，但它没有覆盖并实际上添加了新链接。

export default {
  head () {
    return {
       link: [
         // my links
      ]
    }
    
  }
}

我检查了文档并在此处查看了一些问题，但找不到解决方案。有什么方法可以实现吗？

PS：我想将这两个链接保留在我的全局中，因为有很多页面使用它。

【问题讨论】：

顺便说一句，我听说 AMP 可能会消失。也许给它一个阅读，看看它是否值得麻烦，或者你是否需要在一段时间内删除它。
@kissu 感谢您提供此信息。作为开发人员，我只是在努力完成工作！但注意到了。再次感谢

标签： vue.js nuxt.js amp-html

【解决方案1】：

来自nuxt documentation：

为避免在子组件中使用时出现任何重复，请为元描述提供带有隐藏键的唯一标识符。这样 vue-meta 就会知道它必须覆盖默认标签。

因此，尝试将hid 属性添加到您的元标记以识别它们并能够用子组件覆盖它们。

// nuxt.config.js
head: {
    link: [
      { hid: 'my-stylesheet', rel: 'preload', as: 'style', href: 'mycss' },
    ]
  }

// page/amp.vue
head: {
    link: [
      { hid: 'my-stylesheet', rel: 'preload', as: 'style', href: 'overridedHref' },
    ]
  }

【讨论】：

嗯，这就是我试图做的事情，但我没有将 hid 添加到我的配置文件中，这就是它不起作用的原因。现在我明白了，它可以工作了！谢谢

【解决方案2】：

我也遇到了一些关于 head() 的问题。

在开发模式下，我没有看到任何呈现的元数据，但是当我运行 nuxtgenereate static（无论如何这是我的目标）时，链接就在那里。

我不确定，如果你想保持静态，但我会尝试一下，看看它是否存在或检查，如果你实际构建应用程序会发生什么。

【讨论】：