如何在 Vue/Nuxt 中使用微前端？

Question

我想知道如何將微前端與 Nuxt 或至少 Vue 一起使用。
是否有一種即插即用的簡單解決方案可以使其快速運行？
例如，我聽說過Webpack 的 v5 ModuleFederationPlugin ，這是啟動我的 Nuxt 項目的有效方法嗎？

Answer 1

截至今天，Nuxt2 仍在使用 Webpack4，因此ModuleFederationPlugin將不是一個可能的解決方案。
Nuxt v3 將附帶 Webpack 的 v5 支持，屆時您可能可以試用它。 我還聽說Vite也可以使用同樣的方法。

作為一般性答案，您需要了解微前端並非易事。 它更多地是關於你如何在更大的 scope 中構建你的應用程序。
這就像在后端有一個微服務：可以通過多種方式完成，這完全取決於公司/團隊的需求。

---

如果您確實使用Vue CLI創建 Vue2 或 Vue3 項目，您仍將擁有 Webpack v4。 如果計划使用ModuleFederationPlugin ，您可以嘗試自己進行升級。

作為替代方案，有single-spa 。 這是一種實現方式（可能不是唯一的）。
這是一個深入討論該主題的播客節目： https://devchat.tv/views-on-vue/building-micro-frontends-with-lawrence-almeida-vue-160/
了解其工作的一般方式以及利弊可能是相關的。

如果您對這種方法不滿意，Web 上有很多關於微前端的文章，一些 Google-fu 就足以為您提供替代方法。