如何在Nuxt中嵌入html / js小部件，特别是iFlyChat，但广泛适用

Question

我有几个插件窗口小部件，我想集成到我的网站中，但是我想知道如何最好地使用它来保留Nuxt功能（如代码拆分等）。例如，下面的代码适用于iFlyChat 。当我第一次在appHeader中使用代码时，它可以正常工作，然后间断了一段时间，但现在根本不显示：

<script>
  var iflychat_app_id="xyzappidcode";
  var iflychat_external_cdn_host="cdn.iflychat.com",iflychat_bundle=document.createElement("SCRIPT");iflychat_bundle.src="//"+iflychat_external_cdn_host+"/js/iflychat-v2.min.js?app_id="+iflychat_app_id,iflychat_bundle.async="async",document.body.appendChild(iflychat_bundle);var iflychat_popup=document.createElement("DIV");iflychat_popup.className="iflychat-popup",document.body.appendChild(iflychat_popup);
</script>

此后，我为edwid尝试了类似的小部件，但该页面根本没有显示。

Answer 1

您必须创建一个nuxt plugin才能在每个页面上初始化您的代码。

拳头，创建文件plugins/iflychat.js：

export default () => {

  console.log("init iflychat plugin");

  var iflychat_app_id = "xyzappidcode";
  var iflychat_external_cdn_host="cdn.iflychat.com",iflychat_bundle=document.createElement("SCRIPT");iflychat_bundle.src="//"+iflychat_external_cdn_host+"/js/iflychat-v2.min.js?app_id="+iflychat_app_id,iflychat_bundle.async="async",document.body.appendChild(iflychat_bundle);var iflychat_popup=document.createElement("DIV");iflychat_popup.className="iflychat-popup",document.body.appendChild(iflychat_popup);

}

然后，配置Nuxt.js导入它：

//nuxt.config.js

export default {
  plugins: [
    { src: '~plugins/iflychat.js', mode: 'client' }
  ]
}

就是这样，您的iFlatChat将在每个页面视图上运行。