Nuxt页面meta/link替换全局配置而非追加的问题解决方案

问题现象 #

• 页面内自定义meta、link标签时，nuxt.config.js中配置的全局meta、link标签被全部移除，直接替换为页面新增标签，不符合「页面配置追加到全局配置」的预期
• 全局配置中包含Safari添加书签时展示站点logo所需的apple-touch-icon等配置，页面添加自定义meta后书签图标加载失败，本质是页面级head配置整体覆盖了全局head配置

问题根因 #

Nuxt2基于vue-meta实现head标签管理，默认不会自动合并页面级与全局级的meta、link数组：

• 只有当页面配置的标签携带与全局标签完全一致的唯一hid标识时，才会定向替换对应单个标签
• 如果页面head()方法直接返回独立的meta/link数组，且未主动合并全局配置，对应数组会直接整体覆盖全局的同名字段配置
  从给出的代码可以定位到两个直接触发问题的点：

1. 页面配置的description标签未携带全局配置中对应的hid: 'description'标识，无法触发定向替换逻辑
2. 页面返回的head对象直接定义了独立的link、meta数组，未做全局配置合并，触发了整体覆盖逻辑

修复方案 #

第一步：确认全局配置的唯一hid #

当前nuxt.config.js中的全局配置逻辑基本正确，只需保证所有需要被页面定向替换的meta、link标签都配置了全局唯一的hid即可，现有配置无需大改。

第二步：修改页面head逻辑，主动合并全局配置 #

不要直接在head()中返回独立的meta、link数组，先获取全局head配置，再将页面自定义配置合并进去，同时需要覆盖的单个标签必须携带对应hid，参考修改后的页面代码：

async fetch() {
  // 原有接口请求逻辑保留
  this.headValue = {
    title: this.pageData?.value?.title,
    link: [
      {
        rel: 'canonical',
        href: `https://flyver.ir`,
      },
      // 若需要替换全局的某个link，添加与全局一致的hid即可，例如替换apple-touch-icon就加hid: 'apple-touch-icon'
    ],
    meta: [
      // 替换全局description必须携带和全局一致的hid
      {
        hid: 'description',
        name: 'description',
        content: this.pageData?.value?.description,
      },
      ...this.pageData?.metaTags,
    ],
  };
},
head() {
  // 获取全局head配置
  const globalHead = this.$root.$options.head || {};
  return {
    // 继承全局所有head配置（htmlAttrs等字段会自动保留）
    ...globalHead,
    title: this.headValue.title,
    // 合并全局meta与页面meta，同hid的页面配置会覆盖对应全局项
    meta: [
      ...(globalHead.meta || []),
      ...(this.headValue.meta || [])
    ],
    // 合并全局link与页面link
    link: [
      ...(globalHead.link || []),
      ...(this.headValue.link || [])
    ]
  }
}

注意事项 #

• 若使用Nuxt3，核心逻辑一致：通过useHead配置时不要直接传入独立的meta/link数组，先引入全局配置做合并即可
• 所有hid必须保证全局唯一，否则会出现重复标签、定向替换失效的问题

内容的提问来源于stack exchange，提问作者Amir Mohammad Beheshti