Vue中用于小部件非导入组件的未知自定义元素元素答案

【问题标题】：Unknown custom element element in Vue for a widget non-imported componentVue中用于小部件非导入组件的未知自定义元素元素
【发布时间】：2021-10-05 03:45:47
【问题描述】：

通常，我们会使用 Vue.component() 来注册一个导入的组件。但是，我在代码中包含了一个小部件 sn-p 而不是导入的模块：

<template>
  <v-dialog>
      <script type="application/javascript" defer src="some/hosted/javascript/app.js"></script> 
      <link href="some/hosted/css/app.css" rel="stylesheet" />
      <example-vue-widget some-prop="some-data"></example-vue-widget>
  </v-dialog>
</template>

这是我根据本教程创建的一个使用 webpack 的小部件：https://itnext.io/vuidget-how-to-create-an-embeddable-vue-js-widget-with-vue-custom-element-674bdcb96b97

这个小部件本质上是一个可以正常工作的第三方元素。

但是，我得到了这个：

[Vue warn]: Unknown custom element: <example-vue-widget> - did you register the
component correctly? For recursive components, make sure to provide the "name" option.

我理解为什么 Vue 将上面的警告显示为控制台错误。但是，我怎样才能解决这个问题或至少抑制这个特定的警告？

【问题讨论】：

标签： javascript html vue.js webpack widget

【解决方案1】：

您可以在 main.js 文件中注册该组件。 This 文章很好地解释了它。你基本上只是要把这一行添加到你的新 Vue({}) 语句之前的主文件中。希望对您有所帮助！

// Globally register your component
Vue.component('example-vue-widget', exampleVueWidget);

【讨论】：

谢谢，但正如您从我的问题中看到的那样，这不是我正在导入的组件。无论如何，我找到了一个解决方案，我将在这里发布。

【解决方案2】：

将 and 元素移动到 index.html 中，同时将小部件剪切标记保留在应该解决问题的位置。

【讨论】：