前言:
- 把微应用接入主应用,其实很简单,但是要还要考虑数据通信等等问题
- 路途有点远,也得慢慢走!
- 微应用把React和Vue都用上吧,反正解耦了
- 创建微应用就不使用AppWorks了,使用官网模板,再次声明icestark官网
- 微应用在Appworks里称为子应用,官网里称为微应用
- 前期没发现。可以不用云服务器,在本地跑项目,
本地服务器
拿资源也可以
第一步:下载React/Vue微应用
建议:把微应用和主应用放一个文件夹,方便开发管理
下面拿React举例,Vue是一样的
npm init ice icestark-child @icedesign/stark-child-scaffold
- cd到项目
- yarn 下载依赖
- yarn start 查看项目有无报错(发现没有react-router,执行
yarn add react-router -S
)
发现以下(3个)报错,还是一样,暂时不管,毕竟是官方模板:![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6e81dbe029c2fe68da0f41620036ce67.png#pic_center)
成功页面:![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5657363c9fe06d3321eea2f6e84e1d21.png#pic_center)
第二步:把微应用打包放到服务器上(自己电脑当服务器在文章末尾)
- 微应用打包后
只有一个css文件,一个js文件
,把这两个文件上线,连入主应用- 之前测试连入,是借用了朋友的服务器,现在用Gitee Pages尝试(这篇文章在git&svn专栏里面)
- 总之就是把微应用上线到Gitee Pages,
尝试过后,发现不支持 ==,所以还是部署到服务器上吧
- 注意:服务器一定要设置cors、之前尝试前端代理,发现不行!
部署之后,你需要这个能拿到样式的url地址(一个css的,一个js的
):
第三步,把拿到的两个url,放到主应用app.tsx对应地方
主应用里的位置:
应该说下面第一张图片对应着微应用的一级路由
微应用里:
这样访问http://localhost:3333/baseDataManage就是微应用里的Home组件(微应用的‘/’ 一级路由)
成功引入React/Vue的页面:
上面测试的是云服务器上可以,下面是本地服务器
注意:
- 把
首页放在了主应用
里,暂未发现主应用默认路由怎么连入微应用- 微应用模板打包后只有一个css和一个js文件,然后连入主应用