基于qiankun.js微前端Vue项目源码

原创

已于 2022-06-24 09:05:12 修改 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #乾坤微前端

于 2022-06-19 12:27:53 首次发布

本文探讨了如何使用微前端技术qiankun.js解决企业级项目中的动态子应用集成问题，涉及动态加载、路由错误处理、主应用与子应用通信以及组件共享策略。

微前端

结合小编多年搬砖的经验，企业级的大规模集成平台普遍存在巨石项目难以维护的痛点。载最近的招聘面试中也会有面试官提及微前端的应用场景。小编拙见认为未来微前端将会成为一种趋势。目前为止，对于这种普遍的平台集成，第一种是打击熟悉的iframe，但是用过的人都知道，iframe的缺点，谁用谁知道哈。第二种的话就是基于阿里孵化的项目qiankun.js。这也是小编强力推荐的微前端解决方案。优缺点我就不再这里说了，各位可以移步qiankun.js的官网了解。

主应用框架

小编基于Vue3+typescript+vite搭建了一个主应用的项目。Github项目地址

主要实现功能点包括：

通过接口获取子应用列表实现动态配置微应用

作为一个集成平台，很多时候我们都希望子系统是可以动态配置的，那么我们可以通过API获取到子应用的基本信息，动态注册到qiankun.js进行挂载。载主应用登录之后，会跳转到portal.vue页面，载这个页面注册我们的子应用。这注意要确保挂载的时候挂载节点容器dom已经存在，所以小编在onMounted钩子里面加了nextTick处理。

小编接口使用的免费mock平台，你们有需要可以自己注册账号玩。

onMounted(() => {
  loadingInstance = ElLoading.service({
    fullscreen: true,
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })

  nextTick(() => { 
    getAPPList();
  })
})

//远程获取需要注册的微应用
const getAPPList = () => { 
  API.getAPPList({}).then(({ data: { models = [] } }) => { 
    appList = models;
    initQiankun(store, models, (e:any) => { 
      router.push({ name: '404', params: e})
    });
    loadingInstance.close();
    checkRouter(models,router.currentRoute.value.fullPath,router.currentRoute.value.name);
  })
}

处理路由异常及应用加载异常公用主应用错误页面

通常错误页面都是集成使用主应用的错误页面，在qiankun.js中子应用的激活挂载是通过路由来识别的，也就是所有的应用其实是公用一个URL的，子应用内报错想要使用主应用的错误页面的话，直接在子应用跳转错误路由就好。所以在注册子应用的时候，我们就需要把主应用的错误路由URL传递给子应用。qiankun.js注册子应用的时候提供了props的参数供主应用传递额外参数给子应用。如下：通过errorRouter字段将错误路由传递给子应用。子应用出现路由错误的时候直接跳这个错误路由接可以显示主应用的错误页面了。

错误一：子应用匹配路由错误

主应用将错误路由传给子应用

{
  name: item.name,
  entry: item.entry,
  container: item.container,
  props: {
    mainRouterPath: item.mainRouterPath,
    getGlobalState: qiankunStore.getGlobalState,
    errorRouter:'/404'
  },
  activeRule: (e: Location) => {
    return e.hash.includes(item.mainRouterPath);
  },
}

子应用main.js里面获取到错误路由并注册到子应用的路由守卫。

function render (props = {}) {
  const { container } = props
  const router = getRouter(props.mainRouterPath ? props.mainRouterPath : '')
  // 校验路由
  router.beforeEach((to, from, next) => {
    if (!to.name && to.fullPath !== '/404') {
      router.push({ path: props.errorRouter })
    } else {
      next()
    }
  })
  instance = new Vue({
    router,
    render: h => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app')
}

// webpack打包公共文件路径
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}
// 独立运行
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可