Nuxt3集成LiveChat按钮问题：页面不显示，如何添加代码到body

方法1：使用useHead组合式API（推荐） #

直接在页面或全局布局文件中注入脚本，确保脚本插入到body末尾：

<script setup>
useHead({
  script: [
    {
      src: 'https://cdn.livechatinc.com/tracking.js',
      body: true, // 关键配置：让脚本插入到body底部
      async: true,
      onload: () => {
        // 初始化LiveChat
        window.__lc = window.__lc || {};
        window.__lc.license = YOUR_LICENSE_NUMBER; // 替换为你的实际许可证号
      }
    }
  ]
})
</script>

方法2：创建客户端专属插件 #

在plugins/目录下新建livechat.client.ts（.client后缀确保仅在客户端运行）：

export default defineNuxtPlugin(() => {
  if (process.client) {
    const script = document.createElement('script');
    script.src = 'https://cdn.livechatinc.com/tracking.js';
    script.async = true;
    script.onload = () => {
      window.__lc = window.__lc || {};
      window.__lc.license = YOUR_LICENSE_NUMBER;
    };
    document.body.appendChild(script);
  }
})

无需额外配置，Nuxt会自动加载该客户端插件。

方法3：修正nuxt.config.ts配置 #

若坚持用配置文件注入，确保格式正确并开启body: true：

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://cdn.livechatinc.com/tracking.js',
          body: true, // 必须设置此属性才会插入到body
          async: true,
        }
      ]
    }
  }
})

额外排查要点 #

• 核对许可证号是否正确，无拼写错误
• 检查浏览器控制台是否有脚本加载失败、初始化报错信息
• 关闭广告拦截插件，确认未屏蔽LiveChat脚本
• SSR模式下，确保初始化代码仅在客户端执行（通过process.client判断）

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