如何将 Jitsi Meet 添加到 Vuejs答案

【问题标题】：How to add Jitsi Meet to Vuejs如何将 Jitsi Meet 添加到 Vuejs
【发布时间】：2020-11-19 15:47:33
【问题描述】：

我已经在 public.html 的正文中加载了 jitsi meet 脚本，并且我有一个组件如下：

<template>
  <div class="container">
    <div id="meet"></div>
  </div>
</template>

<script>
export default {
  name: "ServiceMeet",
  mounted() {
    const domain = "meet.jit.si";
    const options = {
      roomName: "PickAnAppropriateMeetingNameHere",
      width: 700,
      height: 700,
      parentNode: document.querySelector("#meet"),
    };
    const api = new JitsiMeetExternalAPI(domain, options);
    console.log(api.getVideoQuality());
  },
};
</script>

当我尝试运行时，我收到一条错误消息 18:21 error 'JitsiMeetExternalAPI' is not defined no-undef，但在后台我可以看到会议运行正常，所以我修复了错误或将其关闭。

【问题讨论】：

更新：不要建议任何 linter 忽略，因为我已经这样做了，但仍然得到一个未定义的错误。

标签： javascript vue.js vuejs2 jitsi

【解决方案1】：

您可以禁用 linting 错误，但我建议将其指定为 global variable。

.eslintrc.js

module.exports = {
  globals: {
    JitsiMeetExternalAPI: true
  }
}

【讨论】：

这不起作用，因为它无法解析任何 .vue 文件。
@svoruganti 你这是什么意思？ ESLint 确实解析 .vue 文件。我验证了这个答案在我的沙箱（一个从 Vue CLI 生成的新项目）中有效。

【解决方案2】：

如果你用window作为全局前缀，它应该可以工作：

const api = new window.JitsiMeetExternalAPI(domain, options);

【讨论】：