使用vue-meta@2.4.0在Nuxt站点<head>添加非标准元素失败的咨询

vue-meta 2.x版本默认只支持标准的<head>元素类型（如meta、link、script等），自定义的非标准元素无法通过配置对象的自定义键（比如你尝试的nonstandard: []）或者顶层innerHTML直接渲染，这就是你的配置无效的原因。

以下是两种可行的解决方法：

方案1：直接修改Nuxt的app.html文件（最简单） #

项目根目录下的app.html是Nuxt的入口模板，直接在这里插入非标准元素即可，同时支持环境变量动态赋值：

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
    <nonstandard href="<%= process.env.SOME_VALUE_FROM_ENV %>"></nonstandard>
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

这种方法绕开vue-meta的限制，直接从模板层面注入元素，兼容性最好。

方案2：通过组件的head()方法配合禁用Sanitize #

如果需要在组件层面动态控制该元素（比如根据路由变化调整属性），可以在页面或布局组件中定义head()方法，手动插入非标准元素：

<template>
  <!-- 组件内容 -->
</template>

<script>
export default {
  head() {
    return {
      // 关闭对html内容的XSS防护，确保插入内容可信
      __dangerouslyDisableSanitizers: ['html'],
      // 插入非标准元素
      html: `<nonstandard href="${process.env.SOME_VALUE_FROM_ENV}"></nonstandard>`
    }
  }
}
</script>

注意：__dangerouslyDisableSanitizers会关闭对应内容的安全校验，务必确保插入的内容是安全可信的，避免XSS风险。

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