首页 > 解决方案 > 如何在 Tawk.to 插件中更改 Vue.use() 中的选项值更改 tawkSrc: 字符串值,尝试在 nuxt FOR TAWK.TO MULTILANGUAGE / 更改小部件

问题描述

在 ~plugins/tawk.js 中声明了全局声明,

import Tawk from 'vue-tawk'
import Vue from 'vue'

const theLang = {
    'en-us': '1fcsh4ccf',
    'zh-cn': '1fh7aj84l',
    'zh-tw': '1fh7ag08c',
    'ms-my': '1fh7ahojp',
    'id-id': '1fh7apl23',
    'jp-jp': '1fh7aqhil',
    'th-th': '1fh7asqq0',
    'kr-kr': '1fh7atv99',
  };

  const locale = 'en-us';

Vue.use(Tawk, {
        tawkSrc: '//the tawk.to widget link//' + theLang[locale] 
    })

使用包

"dependencies": {
  "vue-tawk": "github:albertovincenzi/vue-tawk",
  }

在 nuxt.config.js 中也已添加

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

该插件已经安装并且工作正常,但是现在的问题是,每当网站加载不同的语言时,我想重新加载 tawk.to 小部件,我想到的解决方案之一可能是可以更改使用 ~plugins/tawk 中的文件.js

Vue.use(Tawk, {
        tawkSrc: '//the tawk.to link//' + theLang[locale] 
    })

更改 tawkSrc,但到目前为止我无法做到,请帮帮我:'(,是的,还有一件事,从 tawk.to 插件,在 node_modules 文件夹中,我打开 ~node_modules/vue-tawk/ src/lib/index.js 文件,我尝试编辑代码,但由于代码已编译到 npm 包中,我无法从中进行编辑,

最后,是否可以通过更改 nuxt.js 应用程序上的语言来实现加载 tawk.to 小部件?

谢谢你花时间阅读这篇文章:D

以下来自 node_modules vue-tawk

~node_modules/vue-tawk/src/lib/index.js

let Tawk = {}
const isInit = () => {
  if (window.Tawk_API) {
    return true
  }
  return false
}
Tawk.install = function (Vue, options) {
  Vue.prototype.$Tawk = {}
  Vue.prototype.$Tawk.$startChat = () => {
    let Tawk_API = {}
    let Tawk_LoadStart = new Date()
    let s1 = document.createElement("script")
    let s0 = document.getElementsByTagName("script")[0]
    s1.async = true
    s1.src = options.tawkSrc
    s1.charset = 'UTF-8'
    s1.setAttribute('crossorigin', '*')
    s0.parentNode.insertBefore(s1, s0)
    window.Tawk_API = Tawk_API
  }
  Vue.prototype.$Tawk.$updateChatUser = (user) => {
    if (!isInit()) return
    if (!user) return
    window.Tawk_API.setAttributes({
      'name': user.name,
      'email': user.email,
      'hash': user.hash
    }, function (error) {
      if (!!error) {
        console.log(error);
      }
    })
  }
  Vue.prototype.$Tawk.$endChat = () => {
    window.Tawk_API.endChat()
  }
  Vue.prototype.$Tawk.$isInit = () => {
    return isInit()
  }
  Vue.prototype.$Tawk.$toggle = () => {
    if (isInit()) {
      window.Tawk_API.toggle();
    }
  }
  Vue.prototype.$Tawk.$maximize = () => {
    if (isInit()) {
      window.Tawk_API.maximize();
    }
  }
  Vue.prototype.$Tawk.$minimize =() => {
    if (isInit()) {
      window.Tawk_API.minimize();
    }
  }
  Vue.prototype.$Tawk.$toggleVisibility = () => {
    if (isInit()) {
      window.Tawk_API.toggleVisibility();
    }
  }
  Vue.prototype.$Tawk.$popup = () => {
    if (isInit()) {
      window.Tawk_API.popup();
    }
  }
  Vue.prototype.$Tawk.$hideWidget = () => {
    if (isInit()) {
      window.Tawk_API.hideWidget();
    }
  }
  Vue.prototype.$Tawk.$showWidget = () => {
    if (isInit()) {
      window.Tawk_API.showWidget();
    }
  }
}
export default Tawk

标签: vue.jsnuxt.jsmultilingualtawk.to

解决方案


推荐阅读