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

Question

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

我有一个 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 的预加载 link 标签。我正在为 SEO 做一些 AMP 页面，但 AMP 在加载时出错。

The attribute 'onload' may not appear in tag 'link rel=preload

所以我只想覆盖我的 AMP 页面中的那些 link 标签。我尝试过的是我的 AMP 页面的 head() 函数可以覆盖全局设置，但是它没有覆盖并且实际上添加了新的 links.

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

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

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

Answer 1

来自nuxt documentation：

To avoid any duplication when used in child components, please give a unique identifier with the hid key to the meta description. This way vue-meta will know that it has to overwrite the default tag.

因此，请尝试向元标记添加 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' },
    ]
  }

Answer 2

我也遇到了 head() 的问题。

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

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

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

How to override global meta tags in a specific template in Nuxt?

vue.js

nuxt.js

amp-html