Question

我尝试在我的nuxt网络应用程序（NUXT.js框架）中包含一个由landbot.io开发的机器人。下面是Landbot指南提供给我的代码。

要包含的代码：

<script src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script>
<div id="myLandbot" style="width: 100%; height: 500px"></div>
<script>
  var myLandbot = new LandbotFrameWidget({
    container: '#myLandbot',
    index: 'https://landbot.io/u/..../index.html',
 });
</script>

但是我不知道该如何处理第二个脚本标签，因为我总是会收到此错误：

“ LandbotFrameWidget没有定义”

我在nuxt.config.js中添加了第一个脚本标签，如下所示：

head: {
    script: [
      { src: 'https://static.landbot.io/umicore/UmiAccessPoint.js' },
      { src: 'https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js' }
    ]
}

Answer 1

您的nuxt.config.js配置正确，但是不需要第一个脚本src。

我在此codesandbox中创建了一个工作示例，看一下index.vue文件中使用的代码：

<template>
  <section>
    <div>
      <div id="myLandbot" style="width: 100vw; height: 100vh"></div>
    </div>
  </section>
</template>

<script>
export default {
  mounted() {
    var myLandbot = new LandbotFrameWidget({
      container: "#myLandbot",
      index: "https://landbot.io/u/H-117144-ZGUSSI5IM2OI5NYH/index.html"
    });
  }
};
</script>

希望有帮助！

如何通过bot构造函数提供的带有http url的js文件中的对象，在Nuxt应用程序中包含外部html？

1 个答案: