Nuxt3加载外部脚本报错：无法读取undefined的appendChild属性

你的推测完全正确——Nuxt3在服务端渲染阶段没有浏览器的document对象，直接执行DOM操作代码会触发报错。下面是几种可行的解决办法：

方法一：修改本地脚本，仅在客户端执行 #

修改public/scripts/livechat.js，先判断当前环境是否为浏览器客户端，再执行DOM相关逻辑：

(function() {
  // 仅在浏览器环境下执行
  if (typeof document !== 'undefined') {
    var theScript = document.createElement("script");
    theScript.setAttribute("type", "text/javascript");
    theScript.setAttribute("src", "https://clients.yomdel.com/tools/chat_script.js?url=https://www.xxxxxxxxxxxxxxx.co.uk/");
    document.getElementsByTagName("body")[0].appendChild(theScript);
    theScript.onerror = function(){
      // 可选：添加错误处理逻辑
    }
  }
})();

也可以用Nuxt3内置的process.client变量（仅在客户端环境为true）：

(function() {
  if (process.client) {
    var theScript = document.createElement("script");
    theScript.setAttribute("type", "text/javascript");
    theScript.setAttribute("src", "https://clients.yomdel.com/tools/chat_script.js?url=https://www.xxxxxxxxxxxxxxx.co.uk/");
    document.getElementsByTagName("body")[0].appendChild(theScript);
    theScript.onerror = function(){
    }
  }
})();

方法二：在nuxt.config.js中指定脚本仅客户端加载 #

无需修改本地脚本，直接在配置里给脚本添加client: true属性，让Nuxt只在客户端加载该脚本：

app: {
  head: {
    script: [
      {
        src: "/scripts/livechat.js",
        client: true // 关键：限定仅在客户端加载
      }
    ],
  },
},

方法三：用组合式API在组件中动态加载 #

如果需要更灵活的加载时机（比如仅在特定页面加载聊天脚本），可以在页面或布局组件中使用useHead并结合客户端判断：

<script setup>
// 仅在客户端执行加载逻辑
if (process.client) {
  useHead({
    script: [
      {
        src: "https://clients.yomdel.com/tools/chat_script.js?url=https://www.xxxxxxxxxxxxxxx.co.uk/",
        body: true // 插入到body末尾，和原脚本逻辑一致
      }
    ]
  })
}
</script>

这种方式还能省去本地的livechat.js文件，直接加载远程脚本。

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