如何在Vue/Nuxt生成的静态页面<head>中注入指定自定义特殊标签

以下方案适配SSG静态生成场景，可根据你使用的Nuxt版本选择：

方案1：自定义HTML模板（全版本通用，优先推荐） #

直接修改Nuxt默认的页面HTML模板，全局注入自定义标签，所有生成页面都会自动生效：

1. Nuxt2项目在根目录新建app.html，Nuxt3项目在根目录新建app.template.html
2. 写入以下内容，自定义标签直接插入到{{ HEAD }}占位符之后即可：

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
    <v65:metaTags></v65:metaTags>
    <v65:customFile file="/v65html/_headassets.htm"></v65:customFile>
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

该方案无需额外配置，不会触发默认的标签转义逻辑，适配所有渲染模式

方案2：内置head配置注入 #

如果不想修改模板，可以通过Nuxt内置的head配置关闭安全转义后注入：

Nuxt2配置（nuxt.config.js）： #

export default {
  head: {
    // 关闭meta标签的内容转义
    __dangerouslyDisableSanitizers: ['meta'],
    meta: [
      {
        hid: 'v65-custom-tags',
        innerHTML: '<v65:metaTags></v65:metaTags><v65:customFile file="/v65html/_headassets.htm"></v65:customFile>'
      }
    ]
  }
}

Nuxt3配置（app.vue全局引入）： #

useHead({
  custom: [
    { tag: 'v65:metaTags' },
    { tag: 'v65:customFile', attrs: { file: '/v65html/_headassets.htm' } }
  ]
})

方案3：静态生成钩子批量插入 #

如果仅在SSG静态生成场景使用，可以用生成钩子在输出文件前做字符串替换，兼容性最高：

// nuxt.config.js 配置
export default {
  hooks: {
    generate: {
      page(page) {
        const customHeadTags = `
<v65:metaTags></v65:metaTags>
<v65:customFile file="/v65html/_headassets.htm"></v65:customFile>
`
        // 在head闭合前插入自定义标签
        page.html = page.html.replace('</head>', customHeadTags + '</head>')
      }
    }
  }
}

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