将Vue单个组件导出为Web组件

Question

我有一个Vue应用程序，我在过去几天内整理了一组将嵌入到另一个应用程序中的组件; Vue应用程序用于快速开发，并充当组件的测试工具。

我现在已经开始将这些组件添加到主要的非Vue应用程序中。我知道我可以使用npm run build -- --target wc构建Web组件，但我不想将整个测试工具应用程序构建到单个组件中;相反，我想从应用程序构建单独的Vue组件到单独的可再发行的Web组件中。

我怎样才能做到这一点？

Answer 1

使用@vue/cli-service-global（目前处于测试阶段），您确实可以从Vue SFC构建Web Components。

您可以通过将组件文件指定为glob in the entry CLI argument来跳过（“测试工具”）应用程序：

$ vue-cli-service build --target wc --name foo 'src/components/*.vue'

但是，这仍然会构建一个包含所有自定义元素的JS文件。

您可以使用Async Web Components目标（即wc-async代替wc）进一步在块中分离这些单个元素：

$ vue-cli-service build --target wc-async --name foo 'src/components/*.vue'

然后，将生成的foo.js加载程序文件作为<script>包含在HTML文件中。它将定义所有自定义元素，但在它们出现在DOM之前不会加载它们。

Answer 2

现在，答案是使用官方的 @vue/web-component-wrapper 库。