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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 1555 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

Vue

前端

臃肿

打包

13 条回复 • 2021-10-19 18:52:48 +08:00

hahahahaha234

2020-08-21 14:53:46 +08:00

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

jake361

2020-08-21 14:55:32 +08:00

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

hahahahaha234

2020-08-21 15:41:32 +08:00

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

xuanbg

2020-08-21 15:48:02 +08:00

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

newghost

2020-08-21 16:29:48 +08:00

我们用自己开发的 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

2020-08-21 16:33:15 +08:00

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

newghost

2020-08-21 16:42:42 +08:00

@wind98

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

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

IssacTomatoTan

2020-08-21 21:57:42 +08:00 via Android

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

jake361

2020-08-25 10:02:22 +08:00

@IssacTomatoTan iframe 可还行...

IssacTomatoTan

2020-08-28 21:10:59 +08:00 via Android

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

nong99

2021-09-14 10:44:23 +08:00

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

jake361

2021-10-19 10:39:09 +08:00

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

nong99

2021-10-19 18:52:48 +08:00 via Android

@jake361 好的～谢谢分享