大家使用微前端来架构项目么? 有什么具体方案，框架推荐呢？

› Vue.js

This topic created in 2130 days ago, the information mentioned may be changed or developed.

目前有一个比较复杂的系统，前端这边还是准备选用 vue，但是想尝试一下微前端来搭建，因为功能多，如果全部放在一个项目里，后期肯定会很臃肿，打包慢等等问题。

Vue

前端

臃肿

打包

13 replies • 2021-10-19 18:52:48 +08:00

hahahahaha234

Aug 21, 2020

single-spa,分开仓库，分开打包，分开部署

jake361

Aug 21, 2020

@hahahahaha234 可以，我目前也是在看这个，阿里封装了那个 qiankun 咋样

hahahahaha234

Aug 21, 2020

没用过那个，我们是 single-spa,自己搞的架子哈

xuanbg

Aug 21, 2020

前端的结构是：应用-模块-功能(页面)-子页面，这样 4 级。避免臃肿很简单，合理划分模块，让应用不至于过于庞大就行。然后一个应用一个项目，发布的时候自然轻松。

newghost

Aug 21, 2020

我们用自己开发的 onceio： https://www.npmjs.com/package/onceio

一个进程实现模块挂载，根据不同地址前辍，前往不同模块目录寻找模板和静态资源。
Web 目录可分开部署，其他功能与 express 类似。

注册模块
app.mod('user', './user/web')

以下资源会映射：

/user/css/*.css => ./user/web/css/*.css
/user/js/*.js => ./user/web/js/*.js
/user/*.tmpl => /user/web/*.tmpl

wind98

Aug 21, 2020

@newghost 这看起来是个 web server，多个服务之间可以共享状态以及方法吗？

newghost

Aug 21, 2020

@wind98

是的，挂载的模块在一个进程中，共享 session，全局对象。

这里有我们开发的一些模块。https://github.com/OnceDoc/onceoa-modules

IssacTomatoTan

Aug 21, 2020 via Android

自己简单实现了个 iframe 的有些项目太老了改个传参继续用三年

jake361

Aug 25, 2020

@IssacTomatoTan iframe 可还行...

IssacTomatoTan

Aug 28, 2020 via Android

@jake361 用着挺好的但是有些全屏弹窗不能实现这是最大的坑了设计上要做一些小调整

nong99

Sep 14, 2021

@xuanbg 感谢分享。请问下，子应用菜单导航您们项目是怎么处理的呢？
①是直接初始化子应用并当前激活使用的时候，更新基座应用的导航栏进行操作吗？（一个常规系统包含的顶部 navbar 和侧边栏 sidebar ）
②基座固化菜单栏不变，仅是切换加载子应用 Tab 区域
感觉指教哈~

jake361

Oct 19, 2021

@nong99 我们当时菜单是放在父应用的，子应用的是直接走路由

nong99

Oct 19, 2021 via Android

@jake361 好的～谢谢分享