在 ~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