Vue.js：如何封装外部/嵌入式Widget

Question

我正在尝试使用 Vue 3 和 Vite 构建一个可嵌入的小部件。 我正在尝试使用 vue 的 DefineCustomElement 功能来实现这一点。

这里是

widget.js

文件的示例：

import { createApp, defineCustomElement } from "vue";
import Widget from "./components/Widget.ce.vue";

const TestWidget = defineCustomElement(Widget);
customElements.define("test-widget", TestWidget);

这里是

vite.config.js

文件的示例：

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    build: {
        rollupOptions: {
            input: {
                widget: "resources/js/widget.js",
            },
            output: {
                entryFileNames: `assets/[name].js`,
                chunkFileNames: `assets/[name].js`,
                assetFileNames: `assets/[name].[ext]`,
            },
        },
    },
});

现在我必须将

widget.js

文件包含在其他网站中，并将

<test-widget />

添加到页面正文中。它工作正常，但是当网站还包含 Vue 版本时，我收到许多 js 错误。

是否可以封装嵌入式Vue构建？

Answer 1

您可以使用 Vue 渲染一个简单的

<iframe>

元素，使用

about:blank

作为

src

来继承父级原点（这样就可以从父级访问 iframe 内容），然后将整个应用程序渲染为iframe 中的插槽，这将从父网站封装您的应用程序。

这篇博文演示了如何使用 React 实现上述方法的示例，但也可以使用 Vue 轻松实现，请参阅 this fiddle 了解 Vue 2 示例。