微前端架构qiankun常见问题及解决方案

一、qiankun 常见报错

1、子项目未 export 需要的生命周期函数

微前端架构qiankun常见问题及解决方案

  先检查下子项目的入口文件有没有 export 生命周期函数,再检查下子项目的打包,最后看看请求到的子项目的文件对不对。

2、子项目加载时,容器未渲染好

微前端架构qiankun常见问题及解决方案

  检查容器 div 是否是写在了某个路由里面,路由没匹配到所以未加载。如果只在某个路由页面加载子项目,可以在页面的 mounted 周期里面注册子项目并启动。

二、主项目路由只能用history模式吗?

  由于 qiankun 是通过 location.pathname 值来判断当前应该加载哪个子项目的,所以需要给每个子项目注入不同的路由 path,而 hash 模式子项目路由跳转不改变 path,所以无影响,history 模式子项目路由设置 base 属性即可。

  如果主项目使用 hash 模式,那么得用 location.hash 值来判断当前应该加载哪个子项目,并且子项目都得是 hash 模式,还需要给子项目所有的路由都添加一个前缀,子项目的路由跳转如果之前使用的是 path 也需要修改,用 name 跳转则不用。

  如果主项目是 hash 模式,子项目为 history 模式,那么跳转到子项目之后,无法跳转到另一个 history 模式的子项目,也无法回到主项目的页面。

  vue 项目 hash 模式改 history 模式也很简单:

1、new Router 时设置 mode 为 history :

微前端架构qiankun常见问题及解决方案

2、webpack 打包的配置( vue.config.js ) :

微前端架构qiankun常见问题及解决方案

3、一些资源会报 404,相对路径改为绝对路径:<img src="http://www.likecs.com/img/logo.jpg"> 改为 <img src="http://www.likecs.com/img/logo.jpg"> 即可

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzpjyx.html