首页 > 解决方案 > 应该将 body.appendChild 片段(helpcrunch 聊天)添加到 Vue 单页应用程序的什么位置?

问题描述

我应该在 Vue SPA 中的哪里添加实时聊天 javascript 片段?

下面的代码片段在网络的右下角添加了一个小聊天。HelpCrunch 的说明指出以下代码段应添加到网站的每个页面

<script type="text/javascript">
(function(w,d){
  w.HelpCrunch=function(){w.HelpCrunch.q.push(arguments)};w.HelpCrunch.q=[];
  function r(){var s=document.createElement('script');s.async=1;s.type='text/javascript';s.src='https://widget.helpcrunch.com/';(d.body||d.head).appendChild(s);}
  if(w.attachEvent){w.attachEvent('onload',r)}else{w.addEventListener('load',r,false)}
})(window, document)
</script>

<script type="text/javascript">
  HelpCrunch('init', 'XXXXXXXXXXXXX', {
    applicationId: XXXXXXXXXXXXXXXXXX,
    applicationSecret: 'XXXXXXXXXXXXXXXXXXXXXXX'
  });

  HelpCrunch('showChatWidget');
</script>

我试图将此片段添加到 Vue 注入所有代码的 index.html 中(并且它可以工作),但据我所知,这是不好的做法。

我也尝试在 Vue 实例的 mount() {} 方法内的 main.js 文件中添加它。它有效,但我注意到刷新页面不会添加聊天,可能是由于某种 Vue 缓存。

这个应该加在哪里?

标签: javascriptvue.jsvuejs2vue-router

解决方案


推荐阅读