问题描述
限时送ChatGPT账号..我想知道如何在 Nuxt 或至少 Vue 中使用微前端.
有插头吗?玩简单的解决方案让它快速工作?
例如，我听说过 Webpack 的 v5 ModuleFederationPlugin，这是一个有效的吗?开始我的 Nuxt 项目?
I wanted to know how to use Microfrontends with Nuxt or at least Vue.
Is there a plug & play simple solution to have it working quickly?
I've heard about Webpack's v5 ModuleFederationPlugin for example, is this a valid thing to start my Nuxt project?
推荐答案
截至今天，Nuxt2 仍在使用 Webpack4，因此 ModuleFederationPlugin 将不是可能的解决方案.
Nuxt v3 将附带 Webpack 的 v5 支持，届时您可能可以尝试一下.
As of today, Nuxt2 is still using Webpack4 so ModuleFederationPlugin will not be a possible solution.
Nuxt v3 will come with Webpack's v5 support and you'll probably be able to try it then.
作为一般答案，您需要了解微前端不是一件简单的事情.更多的是关于你如何在更大的范围内构建你的应用程序.
这就像在后端有一个微服务:它可以通过多种方式完成，这一切都取决于公司/团队的需求.
As a general answer, you need to understand that a Microfrontend is not something simple to do. It is more about how you do structure your app in the larger scope.
It's like having a micro-service on the backend: it can be done is multiple ways and it all depends of the needs of the company/team.
如果您确实使用 Vue CLI 创建了 Vue2 或 Vue3 项目，您仍将拥有 Webpackv4.如果计划使用 ModuleFederationPlugin，您可能可以尝试自己进行升级.
If you do create a Vue2 or Vue3 project with the Vue CLI, you'll still have Webpack v4. You can probably try to make the upgrade yourself if planning to use ModuleFederationPlugin.
作为替代，有 single-spa.这是一种方法(可能不是唯一的).
这是一个深入讨论该主题的播客节目:https://devchat.tv/views-on-vue/building-micro-frontends-with-lawrence-almeida-vue-160/
了解这种工作的一般方式以及利弊可能是相关的.
As an alternative, there is single-spa. This is a way of doing it (probably not the only one).
Here is a podcast show talking about the subject in depth: https://devchat.tv/views-on-vue/building-micro-frontends-with-lawrence-almeida-vue-160/
It may be relevant to understand the general way this is working and also the pro/cons.
如果您对这种方法不满意，网上有很多关于微前端的文章，一些 Google-fu 足以为您提供另一种方法.
If you're not satisfied with this approach, there are a lot of articles on the Web talking about Microfrontends and some Google-fu will be enough to give you an alternative way.
这篇关于如何在 Vue/Nuxt 中使用微前端?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
更多推荐
[db:关键词]
发布评论