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

2020-08-21 14:35:31 +08:00
 jake361
目前有一个比较复杂的系统,前端这边还是准备选用 vue,但是想尝试一下微前端来搭建,因为功能多,如果全部放在一个项目里,后期肯定会很臃肿,打包慢等等问题。
2553 次点击
所在节点    Vue.js
13 条回复
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
自己简单实现了个 iframe 的 有些项目太老了改个传参继续用三年
jake361
2020-08-25 10:02:22 +08:00
@IssacTomatoTan iframe 可还行...
IssacTomatoTan
2020-08-28 21:10:59 +08:00
@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
@jake361 好的~谢谢分享

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/700250

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX