带有 SystemJS / Vuetify 的 Vuejs 微前端

如何解决带有 SystemJS / Vuetify 的 Vuejs 微前端

我正在研究一个 POC，以制作一个可以动态加载另一个 VueJS 子应用程序的 VueJS 门户应用程序。

我无法使用 Webpack 模块联合，因为我需要发现我可以在运行时而不是在构建时“拉”哪个应用程序。

所以我决定在 SystemJS 中使用 importmap。

我使用简单的子应用程序，但是当我使用 Vuetify 时，我遇到了很多错误，例如：

[Vue 警告]：$listeners 是只读的。
[Vue 警告]：$attrs 是只读的。

有些 Vuetify 组件根本不起作用。

这似乎是由重复的 VueJS 导入引起的（一个是 webpack，另一个是 systemjs），但我不确定（我可以访问相同的 this.$store 所以...）。

无论如何，这是我的仓库：https://github.com/Saveriu/vue-microfrontends

我尝试了很多示例，但没有找到满足我所有要求的示例。 如果有人可以研究它并找到修复它的方法，这将是分享 VueJS 微前端的一个很好的例子！

解决方法

使您的子应用程序成为 WebComponents - 以下是一些可以帮助您的信息：

• https://github.com/kartsims/vue-customelement-bundler/tree/rollup
• https://itnext.io/vuidget-how-to-create-an-embeddable-vue-js-widget-with-vue-custom-element-674bdcb96b97
• https://github.com/karol-f/vue-custom-element
• https://filosophy.org/code/bundling-vue-css-and-js-into-a-single-output-file/

当然，您将无法在子应用之间或主应用和子应用之间共享 Vuex 内容 - 您需要找到一种更复杂的“共享”状态方式。