从零搭建飞冰微前端项目《第三篇：搭建微应用》❤️

前言：

• 把微应用接入主应用，其实很简单，但是要还要考虑数据通信等等问题
• 路途有点远，也得慢慢走！
• 微应用把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个）报错，还是一样，暂时不管，毕竟是官方模板：

成功页面：

第二步：把微应用打包放到服务器上（自己电脑当服务器在文章末尾）

• 微应用打包后只有一个css文件，一个js文件，把这两个文件上线，连入主应用
• 之前测试连入，是借用了朋友的服务器，现在用Gitee Pages尝试（这篇文章在git&svn专栏里面）
  • 总之就是把微应用上线到Gitee Pages，尝试过后，发现不支持 ==，所以还是部署到服务器上吧
• 注意：服务器一定要设置cors、之前尝试前端代理，发现不行！

部署之后，你需要这个能拿到样式的url地址（一个css的，一个js的）：

第三步，把拿到的两个url，放到主应用app.tsx对应地方

主应用里的位置：

应该说下面第一张图片对应着微应用的一级路由

微应用里：

这样访问http://localhost:3333/baseDataManage就是微应用里的Home组件（微应用的‘/’ 一级路由）

成功引入React/Vue的页面：

上面测试的是云服务器上可以，下面是本地服务器

注意：

• 把首页放在了主应用里，暂未发现主应用默认路由怎么连入微应用
• 微应用模板打包后只有一个css和一个js文件，然后连入主应用