在Nuxt项目中集成FrontChat遇报错，请求技术支持

核心问题分析 #

当前代码的问题在于Front Chat的异步脚本还未加载完成，初始化代码就已执行，导致window.FrontChat未定义。虽然process.client确保了代码只在客户端运行，但脚本加载和代码执行的时机没有同步。

修复方案 #

方案1：通过脚本加载回调初始化 #

修改nuxt.config.js的head配置，给脚本添加onload回调，确保脚本加载完成后再执行初始化：

head: {
  script: [{ 
    src: 'https://chat-assets.frontapp.com/v1/chat.bundle.js',
    onload: `
      window.FrontChat('init', {
        chatId: 'XXXXXXXXXXXXXXX',
        useDefaultLauncher: true
      })
    `
  }]
}

同时删除Pages/index.vue中的初始化代码，避免重复执行。

方案2：在组件mounted钩子中确保脚本加载完成 #

如果需要在组件内控制初始化时机，可在Pages/index.vue的mounted钩子中添加检查逻辑：

<script>
export default {
  mounted() {
    // 轮询检查脚本是否加载完成，避免延迟设置的不确定性
    const checkFrontReady = setInterval(() => {
      if (window.FrontChat) {
        window.FrontChat('init', {
          chatId: 'XXXXXXXXXXXXXXX',
          useDefaultLauncher: true
        })
        clearInterval(checkFrontReady)
      }
    }, 100)
  }
}
</script>

方案3：用Nuxt客户端插件管理脚本 #

创建plugins/front-chat.client.js（后缀.client.js确保仅在客户端执行）：

export default () => {
  const script = document.createElement('script')
  script.src = 'https://chat-assets.frontapp.com/v1/chat.bundle.js'
  script.onload = () => {
    window.FrontChat('init', {
      chatId: 'XXXXXXXXXXXXXXX',
      useDefaultLauncher: true
    })
  }
  document.body.appendChild(script)
}

然后在nuxt.config.js中注册该插件：

plugins: [
  '~/plugins/front-chat.client.js'
]

额外注意事项 #

• 确认chatId无拼写错误，这是初始化成功的关键
• 测试前清空浏览器缓存，避免旧脚本缓存干扰
• 若使用Nuxt3，需将head配置迁移至nuxt.config.ts的app.head字段，或在app.vue中处理

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