有啥解决方案可以在 vuetify 和 bootstrap-vue 上合并两个 vue 应用程序

Posted 2023-02-22

【中文标题】有啥解决方案可以在 vuetify 和 bootstrap-vue 上合并两个 vue 应用程序

【英文标题】：Is there any solution to union two vue apps on vuetify and bootstrap-vue有什么解决方案可以在 vuetify 和 bootstrap-vue 上合并两个 vue 应用程序

【发布时间】：2021-01-17 14:01:32

【问题描述】：

我在 vue 上有两个 SPA，在同一个部署区域：

使用 Vuetify (www.someserver.com/portal_1/) 使用 Bootstrap-vue (www.someserver.com/portal_2/)

现在我需要使用两个 SPA 中的组件制作一些门户区域。有什么方法可以处理吗？

我尝试使用 vuetify 和 bootsrtap-vue 创建应用程序，但遇到许多 sass 错误...

【参考方案1】：

我在 Vuetify 样式方面遇到了同样的问题。我需要在我的 Vuetify 应用程序中嵌入第二个 Vue 应用程序，但 Vuetify 样式一直在子 Vue 应用程序中泄漏，并且来自子应用程序的全局样式也破坏了 Vuetify 默认值。

我进行了长期研究，得出的结论是：

-使用 BEM 方法重写子应用程序（仍然 Vuetify 会使用 p、head、body 等选择器泄漏）

-禁用 Vuetify 的 CSS 重置文件，删除全局变量并通过 hacky 方法禁用主题。

-在第二个应用程序上使用 iFrame 容器或 Web 组件方法将其与另一个应用程序隔离。

与 Vuetify 库搞混听起来不太好，因为以后处理问题会太混乱。最后，我们决定通过 iFrame 完全隔离两个 Vue 实例，如果你真的需要同时使用 bootstrap-vue 和 Vuetify，我建议你做同样的事情，因为它们都有全局 CSS 选择器修饰符和只会创建的东西一团糟。

我让我的团队进一步研究 iframe 以及如何在 iframe 和父应用之间持续传递数据，您可以考虑以下两个选项：

vuex-iframe-sync（一个轻量级的选项，但我无法让它正常工作）

https://github.com/L-Chris/vuex-iframe-sync

Zoid（由 payPal 维护的库，非常可靠的方法，但使用 Vue 设置起来很棘手） https://github.com/krakenjs/zoid

有关如何使用 Vue 设置 zoid 的更多信息： https://github.com/krakenjs/zoid/issues/296

PostRobot（没试过这个但也是一个不错的选择，可能比 zoid 容易得多） https://github.com/krakenjs/post-robot

祝你好运，如果你发现任何其他可行的方法，请告诉我！