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

Question

我有几个插件小部件想集成到我的站点中，但我想知道如何最好地保留 Nuxt 功能，如代码拆分等。例如，下面的代码适用于飞聊。当我第一次使用我的 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 将在每次页面浏览时运行。

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

How to embed html/js widgets in Nuxt, specifically iFlyChat but broadly applicable

plugins

vue.js

nuxt.js