在 Nuxt/Vue 应用程序中使用 tawk.to答案

【问题标题】：Using tawk.to with Nuxt/Vue Application在 Nuxt/Vue 应用程序中使用 tawk.to
【发布时间】：2019-01-09 17:03:23
【问题描述】：

有人知道如何在 Nuxt 应用程序中使用 tawk.to 吗？

我在我的插件文件夹中创建了一个文件“tawk.js”，代码如下：

var Tawk_API = Tawk_API || {},
  Tawk_LoadStart = new Date()
  (function () {
    var s1 = document.createElement('script')
    s0 = document.getElementsByTagName('script')[0]
    s1.async = true
    s1.src = 'https://embed.tawk.to/[my_ID_HERE]/default'
    s1.charset = 'UTF-8'
    s1.setAttribute('crossorigin', '*')
    s0.parentNode.insertBefore(s1, s0)
  })()

我也把它放在了 nuxt.config.js 上：

  plugins: [
    { src: '~/plugins/tawk.js', ssr: false }
  ]

没有用。它确实显示了一些编译错误：

1:1   error  Split initialized 'var' declarations into multiple statements
1:5   error  Identifier 'Tawk_API' is not in camel case
1:16  error  Identifier 'Tawk_API' is not in camel case
1:16  error  'Tawk_API' was used before it was defined
2:3   error  Identifier 'Tawk_LoadStart' is not in camel case
2:3   error  'Tawk_LoadStart' is assigned a value but never used
2:29  error  Unexpected space between function name and paren
3:3   error  Unexpected newline between function and ( of function call
5:5   error  's0' is not defined
10:5   error  's0' is not defined
10:36  error  's0' is not defined

【问题讨论】：

所有错误，除了最后三个，都来自你的 linter 设置（我猜是 eslint？）。仔细阅读它们，您应该能够修复它们。 's0' is not defined 错误表明，document.getElementsByTagName('script')[0] 没有找到它正在寻找的 script 标记，您可能希望使用另一个元素（实际存在）作为父元素。
谢谢奥斯卡。我可以用 /* eslint-disable */ 修复 eslint 错误，但我不知道如何处理“s0”错误，因为“脚本”ID 可能在他们的聊天小部件上。
发生s0 错误，因为您的代码试图找到一个现有的script 标记以用作Tawk 脚本的插入点，但它没有找到。您可以尝试将脚本直接附加到文档正文中，如下所示：删除 s0 = document.getElementsByTagName('script')[0] 并将 s0.parentNode.insertBefore(s1, s0) 替换为 document.body.appendChild(s1);。

标签： javascript html vue.js nuxt.js tawk.to

【解决方案1】：

在 nuxt 项目中集成 tawk.to 的最佳方式是转到nuxt.config.js 并将其添加为script 标签。

// nuxt.config.js
export default {
    // ...
    head: {
        // ...
        script: [
            // ...
            {
                hid: 'tawk.to',
                src:
                    'https://embed.tawk.to/5edf699a9e5f694422903412/default',
                defer: true
            }
        ]
    },
},

【讨论】：

【解决方案2】：

您可以尝试使用 tawk 的 vue 包装器。 vue-tawk

import Tawk from 'vue-tawk'

Vue.use(Tawk, {
    tawkSrc: 'https://embed.tawk.to/5d5528ee2xxxxxxxxxxxx/default'
})

【讨论】：

这对你有用吗？我在我的 nuxt 网站上尝试过，聊天小部件没有加载。控制台没有错误。
它对我有用，但有什么办法可以阻止 tawk 在某些路线上加载？
created() { window.Tawk_API.onLoad = function () { window.Tawk_API.hideWidget(); }; }, 使用它来阻止 tawk 加载某些组件
这个解决方案对我有用。非常感谢。