Javascript body.appendChild片段（helpcrunch聊天）应添加到Vue单页应用程序的何处？

我应该在Vue SPA中的何处添加livechat javascript片段

下面的代码片段在web的右下方添加了一个小聊天。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>

（功能（w，d）{
w、 HelpCrunch=function（）{w.HelpCrunch.q.push（参数）}；w.HelpCrunch.q=[]；
函数r（）{var s=document.createElement（'script'）；s.async=1；s.type='text/javascript'；s.src='1https://widget.helpcrunch.com/"(d.身体| | | d.头)(s))
if（w.attachEvent）{w.attachEvent（'onload'，r）}else{w.addEventListener（'load'，r，false）}
})（窗口、文件）
HelpCrunch（'init'，'xxxxxxxxxxxx'{
应用程序ID:xxxxxxxxxxxxxxxx，
应用程序机密：“XXXXXXXXXXXXXXXXXXXX”
});
HelpCrunch（“showChatWidget”）；

我曾尝试将此代码段添加到index.html中，Vue在其中注入所有代码（并且可以正常工作），但据我所知，这是一种糟糕的做法

我还尝试将其添加到Vue实例的mounted（）{}方法内的main.js文件中。它可以工作，但我注意到刷新页面不会添加聊天，可能是由于某种Vue缓存

---

这应该添加到哪里

将它添加到

index.html

对我来说似乎很好。问题是什么？老实说，我没有看到任何明确的理由不将其添加到index.html中，只是我从未见过有人在类似情况下这样做：P无论如何，我希望在其他Vue组件中重复使用HelpCrunch对象。如果我用该代码创建另一个.js文件，然后用脚本src=”将其导入index.html，它将无法工作。我如何才能做到这一点？我假设您将vuejs与webpack一起使用。您可以将它放在某个文件中，例如

help crunch.js

，并在文件的底部导出HelpCrunch对象（使用

export default HelpCrunch

）。然后，您可以导入该文件（

import HelpCrunch from“”

），并在需要时随时使用它。据我所知，它应该是一个相同的实例，无论你在哪里导入它。