Nuxt.js页面本地title与meta配置无法覆盖全局配置如何解决

问题根源 #

Nuxt 2.x 默认的head配置合并逻辑遵循以下规则：

• 标题、link等字段默认采取合并策略，优先级为：页面层级配置 > 布局层级配置 > 全局配置
• meta标签通过hid属性作为唯一标识符判断是否覆盖：仅当页面配置的meta的hid与全局配置的hid完全一致时，才会覆盖全局配置，否则会直接追加新的meta标签
• 如果布局文件（layouts/*.vue）中也配置了head属性，布局配置优先级高于页面配置，会覆盖页面的head设置

解决步骤 #

1. 排查布局层级配置
   先检查项目的默认布局文件layouts/default.vue，确认是否存在head配置，如果有，将布局中的head配置删除，或者调整为函数式写法优先读取页面配置。

2. 调整全局head配置增加titleTemplate
   修改nuxt.config.js中的head配置，新增titleTemplate字段适配页面自定义标题，避免固定全局title导致页面配置不生效：

export default {
  // ...其他配置
  head: {
    // %s会自动替换为页面设置的title，页面未设置title时使用默认标题拼接后缀
    titleTemplate: '%s | my website',
    title: 'my website default title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'my website default description'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  }
}

3. 页面配置如需覆盖全局meta，保持hid一致
   如果需要在页面中覆盖全局的通用meta标签，需要保证页面meta的hid与全局配置的hid完全一致，示例如下：

export default {
    name: 'test-page',
    head() {
        return {
            title: 'Test page',
            meta: [
                // hid与全局一致，会覆盖全局的description配置
                {
                    hid: 'description',
                    name: 'description',
                    content: 'Test page description'
                },
                // 自定义新增的meta，不会和全局冲突，正常追加
                {
                    hid: 'test-description',
                    name: 'test-description',
                    content: 'Test page description'
                }
            ],
        }
    },
}

4. 排查第三方模块冲突
   如果以上配置调整后仍然不生效，检查项目是否引入了第三方SEO相关模块，这类模块可能会修改默认的head合并逻辑，可临时禁用模块排查是否是模块冲突导致的问题。

内容的提问来源于stack exchange，提问作者Sachin Kumar