Nuxt 2（SSR）中如何禁用谷歌翻译并正确渲染相关标签？

问题原因 #

Nuxt 2 基于 vue-meta 管理页面头部，而 vue-meta 在处理 htmlAttrs 和 bodyAttrs 中的 class 属性时不支持数组格式，你之前传入的数组会被直接忽略，导致 notranslate 类未渲染；另外需确保全局 head 配置未被页面级配置覆盖。

修正后的全局配置 #

将 class 的数组写法改为空格分隔的字符串，调整后的 nuxt.config.js 头部配置如下：

head: {
  htmlAttrs: {
    lang: 'es',
    class: 'notranslate', // 改为字符串格式
    translate: 'no'
  },
  meta: [
    { charset: 'utf-8' },
    { name: 'google', content: 'notranslate' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { hid: 'description', name: 'description', content: '' }
  ],
  bodyAttrs: {
    class: 'notranslate' // 同样改为字符串格式
  }
}

额外排查与补充方案 #

1. 检查是否存在配置覆盖：如果某个页面的 head 方法中重新定义了 htmlAttrs 或 meta 标签，会覆盖全局配置。可以检查页面级的 head 逻辑，确保没有冲突。

2. 客户端兜底处理：如果 SSR 渲染后仍有问题，可以通过客户端插件强制添加配置，避免服务端渲染的遗漏：

   • 创建插件文件 plugins/disable-google-translate.js：

     export default () => {
       document.documentElement.classList.add('notranslate');
       document.body.classList.add('notranslate');
       
       // 确保谷歌meta标签存在
       const googleMeta = document.querySelector('meta[name="google"]');
       if (!googleMeta) {
         const meta = document.createElement('meta');
         meta.name = 'google';
         meta.content = 'notranslate';
         document.head.appendChild(meta);
       }
     }
     

   • 在 nuxt.config.js 中注册插件（仅客户端执行）：

     plugins: [
       { src: '~/plugins/disable-google-translate.js', mode: 'client' }
     ]
     

内容的提问来源于stack exchange，提问作者Ivan W.