简单配置子应用的webpack后启动报错

微前端搭建错误记录 - 图1
原因:
子应用webpack配置output不能在函数内部,只能通过对象方式

  1. // 这样配置会报错
  2. configureWebpack: config => {
  3. output: {}
  4. }

所以我在上面新增了一个configureWebpack,用对象方式写入,结果就报上面的错误了,一直死循环
解决:
将configureWebpack配置都写入一个对象中,不要拆分成两个对象即可

将App.vue中的router-view打开,会一直跳转/路径

原因:
router配置中有默认路径配置,删掉即可

  1. {
  2. path: '*',
  3. redirect: '/'
  4. }

router跳转会自动带上dist,导致无法进入子应用

image.png
解决:
刚开始以为是全局router添加了base:’/dist’,后来发现是开发在代码里面手动添加的dist,删掉就没事了

微前端搭建错误记录 - 图3

子应用中跳转自身,会多加子应用路由匹配的前缀,导致跳转页面无法正常渲染子路由

描述:
比如楼盘侧子应用,进入匹配是/building前缀,但是在子应用中又跳转了应用中的页面,就导致路由多加了前缀

微前端搭建错误记录 - 图4
代码在拆分之前没问题,如下:

  1. let queryHref = this.$router.resolve({
  2. path: '/building/BuildAddHouseDetail'
  3. });
  4. window.open(queryHref.href);

问题:
未拆分前,子应用其实就是整个项目的一个二级路由,但是拆分子应用后,其实这个应用自身来说,就是一个项目,是不需要二级路由的
解决:
如果子应用本来就需要二级路由,并且一级路由就是子应用匹配的前缀,可以将子应用路由进行修改,直接变成二级的即可

微前端搭建错误记录 - 图5

百度地图在项目里面报错

报错:跨域
子应用中,使用了jsonp异步加载百度地图,出现了上述错误
原因:
qiankun使用fetch来进行请求,在子应用中请求第三方的百度地图,则会出现跨域
解决:

https://qiankun.umijs.org/zh/faq#如何解决由于运营商动态插入的脚本加载异常导致微应用加载失败的问题
https://github.com/umijs/qiankun/issues/812
https://qiankun.umijs.org/zh/api#startopts

  1. 将百度地图的js放公司服务器中,不产生跨域
  2. 乾坤的start方法里面,给了一个参数,表示不被qiankun劫持,这样则可以正常请求百度地图

使用excludeAssetFilter浏览器出现警告—再关注一下

微前端搭建错误记录 - 图6

https://github.com/umijs/qiankun/issues/1238

解决:
其实不影响功能,但是一直会抛出警告
公共第三方资源(vue、vuex等)使用方式
同一个git仓库
在根目录创建一个文件夹,有自己的package.json,下载模块公用的一些库,然后子应用使用npm下载使用

微前端搭建错误记录 - 图7

微前端搭建错误记录 - 图8
多个git仓库
git submodule进行链接