使用 vue-cli 3 将 vue 依赖项捆绑到 Web 组件构建中

Posted 2023-02-22

【中文标题】使用 vue-cli 3 将 vue 依赖项捆绑到 Web 组件构建中

【英文标题】：Bundle the vue dependency into a web component build using vue-cli 3

【发布时间】：2019-02-05 01:37:04

【问题描述】：

我正在使用 vue-cli 3 将我的 vue 组件捆绑到 Web 组件中，使用类似的命令：

package.json

"build:wc": "vue-cli-service build --target wc-async --name webcomponent-global 'src/components/*/*.vue'"

这一切都很好，但是根据docs，您需要一个全局 vue 依赖项才能使其正常工作，因为 vue 运行时已从构建中排除：

请注意，捆绑包依赖于页面上全局可用的 Vue。

这迫使我使用两个脚本标签来包含 Web 组件，如下所示：

<script src="https://unpkg.com/vue"></script>
<script src="path/to/my-element.js"></script>

<!-- use in plain html, or in any other framework -->
<my-element></my-element>

有没有办法告诉 vue-cli 将 vue 依赖包含到 webcomponent 包本身中，这样只需要包含一个脚本就可以让 web 组件正常工作。

【问题讨论】：

那你为什么需要将它构建为 Web 组件呢？我认为排除 Vue 是这种模式的一个特点，而不是缺点。不过，this issue 可能会有所帮助。

这是一项功能，因为它可以防止 vue 运行时被捆绑到每个 Web 组件中，从而减少包大小和加载时间。这就是你 99% 的时间想要的，只是在我的生产环境中我不能那样做。谢谢你的问题，我去看看。

我也有同样的情况。我们的应用程序的某个部分已用于我组织中的其他人。我们正在将此部分外部化，以便其他人可以使用它，但是我们不想要求他们自己导入 Vue。我们希望用户不知道内部正在使用 Vue。我们将创建各种适配器（角度、反应等），人们可以在他们的应用程序中透明地使用它们，而不知道我们的作品最终是一个 vue 组件。

【参考方案1】：

您可以通过传递 --inline-vue 标志来内联 Vue，如下所述： https://cli.vuejs.org/guide/build-targets.html#web-component