如何将微前端与 Vue/Nuxt 结合使用？

Question

我想知道如何将微前端与 Nuxt 或至少 Vue 一起使用。
是否有一种即插即用的简单解决方案可以使其快速工作？例如，
我听说过Webpack 的 v5 ModuleFederationPlugin ，这是启动我的 Nuxt 项目的有效方法吗？

Answer 1

截至今天，Nuxt2 仍在使用 Webpack4，因此这ModuleFederationPlugin不是一个可能的解决方案。
Nuxt v3 将提供 Webpack v5 支持，届时您可能可以尝试一下。我还听说Vite 也可以使用同样的功能。

作为一般答案，您需要了解微前端并不是一件简单的事情。更多的是关于如何在更大范围内构建应用程序。
这就像在后端有一个微服务：可以通过多种方式完成，这完全取决于公司/团队的需求。

如果您确实使用Vue CLI创建 Vue2 或 Vue3 项目，您仍然拥有 Webpack v4。如果计划使用，您可以尝试自己进行升级ModuleFederationPlugin。

作为替代方案，有single-spa。这是一种实现方法（可能不是唯一的方法）。
这是一个深入讨论该主题的播客节目：https://devchat.tv/views-on-vue/building-micro-frontends-with-lawrence-almeida-vue-160/
它可能与了解一般性相关这是工作的方式以及优点/缺点。

如果您对这种方法不满意，网上有很多讨论微前端的文章，并且一些 Google-fu 足以为您提供替代方法。