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

Posted 2023-02-22

【中文标题】将 Vue 单个组件导出为 Web 组件

【英文标题】：Exporting Vue individual components as Web Components

【发布时间】：2018-11-11 12:25:43

【问题描述】：

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

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

我怎样才能做到这一点？

【参考方案1】：

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

【参考方案2】：

使用 @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 之前加载它们。

【讨论】：

运行命令 'vue-cli-service build --target wc --name my-custom-element 'src 后出现此错误'找不到模块'@vue/cli-plugin-babel' /components/*.vue'。我正在使用最新版本的 vue-cli。

@MangeshDaundkar 请随时打开一个新问题，并提供您问题的具体细节。