Javascript Vue组件中的条件导入

我有一个根实例，其中有几个

CustomVideo

-组件（在一堆其他组件中）。

CustomVideo

-组件实现，但并非所有页面上都有

CustomVideo

-组件，因此我不想全局导入VideoJS。以下是页面上组件的示例：

App.js
|
|-- CustomVideo
|-- FooComponent
|-- CustomVideo
|-- BarComponent
|-- CustomVideo

在CustomVideo的顶部，我导入VideoJS，如下所示：

从“video.js”导入videojs；
从“videojs abloop”导入abloop插件
导出默认值{
名称：“FeaturedVideoPlayer”，
道具：{
videoUrl:String
}
安装的（）{
让视频选项={
资料来源：[
{
src:this.videoUrl，
类型：“视频/mp4”
}
],
插件：{
Abloop插件：{
“已启用”：true
}
}
};
this.player=videojs（this.$refs.featuredVideoPlayer，videoOptions，函数onPlayerReady（）{}）；
}

但是如果有多个

CustomVideo

，则会收到控制台警告：

VIDEOJS:WARN:名为“abLoopPlugin”的插件已存在。您可能希望避免重新注册插件

我试着研究有条件的导入，但似乎不是这样做的

---

即使我尝试在

app.js

中导入它，即使我更愿意导入

CustomVideo

，我也会遇到另一个控制台错误：

尝试

从“videojs abloop”导入abloop插件
Vue.use（abLoopPlugin）；

然后我得到一个错误：

未捕获的TypeError:无法读取未定义的属性“registerPlugin”

---

---

如何确保插件只注册一次？

尝试创建abLoopPlugin的实例。我采用了同样的方法让vue-i18n和其他插件在全球范围内使用。类似于：

import AbLoopPlugin from 'videojs-abloop'

Vue.use(AbLoopPlugin) // CHECK IF REGISTER PLUGIN ERROR PERSIST

const abLoopPlugin = new AbLoopPlugin({
   ---your settings---
})
export default abLoopPlugin

检查

videojs.getPlugins（）.abLoopPlugin

返回所有加载插件名称的符号表。在将其加载到组件中之前，只需检查

abLoopPlugin

是否不在该表中：

从“video.js”导入videojs
如果（！videojs.getPlugins（）.abLoopPlugin）{
abLoopPlugin（窗口，videojs）
}

使用

ref

您会注意到，您的视频最初在指定的

元素中不可见。这是因为

ref

在

mounted（）中将其传递给
videojs
时未定义

国家：

关于ref注册计时的一个重要注意事项：由于ref本身是作为render函数的结果创建的，因此您无法在初始渲染时访问它们-它们还不存在

解决方案是等到：

async-mounted（）{
//此处未定义此.$refs.featuredVideoPlayer
等待此消息。$nextTick（）
//此处为。$refs.featuredVideoPlayer
this.player=videojs（this.$refs.featuredVideoPlayer）
}

查看中的说明，该插件是一个通用javascript库，不是一个有效的Vue插件。请尝试在
app.js
中使用以下代码。示例：
从“video.js”导入videojs从“videojs abloop”导入abLoopPlugin（窗口，videojs）
谢谢你的参与。当我按照你的建议（
如果（！abLoopPlugin.loaded）{
操作时，我仍然得到了错误。当我在console.logged
abLoopPlugin
中看到它是一个函数（因此没有任何
加载的
-属性。但是您的答案让我找到了答案，就是：
如果（！videojs.getPlugins（）.abLoopPlugin）{abLoopPlugin（window，videojs）；}
。如果您编辑您的答案以包含此内容（并在下一步的
nextTick
上保留好的注释，然后我会将您的答案标记为正确的解决方案。@Zeth啊，我现在看到了。更新了答案和演示。