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

Question

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

我现在已经到了将这些组件添加到它们预期的主要非 Vue 应用程序的地步。我知道我可以使用 npm run build -- --target wc 构建 Web 组件，但我不想将整个测试工具应用程序构建到一个组件中；相反，我想将应用程序中的各个 Vue 组件构建到单独的可再分发 Web 组件中。

我怎样才能做到这一点？

Answer 1

与 @vue/cli-service-global (目前处于测试阶段)，你确实可以构建 Web Components来自你的 Vue SFC。

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

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

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

您可以使用 Async Web Components 在 block 中进一步解耦这些单独的元素改为目标(即 wc-async 而不是 wc ):

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

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