qiankun 找不到入口问题彻底解决

针对 “qiankun 找不到入口问题” 的解决方案可以分成以下几个步骤：

第一步：正确使用 qiankun 注册微应用

我们在使用 qiankun 时需要在主应用中注册微应用，通常我们会这样来进行配置：

registerMicroApps([
  {
    name: 'sub-app',
    entry: '//localhost:8080',
    container: '#subApp',
    activeRule: '/sub'
  }
])

其中 registerMicroApps 方法用于注册微应用，参数为一个数组，其中每个元素为一个微应用的配置项。这里的配置项包括应用的名称(name)、微应用的 URL 入口(entry)、微应用的容器选择器(container)以及微应用的激活规则(activeRule)。

但是如果我们使用了一些框架，比如 Vue、React 等，在这些框架中使用路由时，微应用的激活规则需要进行调整，具体调整方法可以查看 官方文档-微应用路由和菜单示例。

第二步：确保主应用与微应用间正确传递通讯

在主应用与微应用之间进行通讯时，我们需要使用window.addEventListener方法监听派发事件以及window.dispatchEvent方法派发事件。举个例子，如果我们希望主应用与微应用之间进行值传递，我们需要这样编写代码：

// 在主应用中派发事件进行传递
window.dispatchEvent(new CustomEvent('from-main', { detail: 'Hello from Main' }))

// 在微应用中监听事件进行接收
window.addEventListener('from-main', ({ detail }) => {
  console.log(detail)  // Hello from Main
})

这里需要注意的是，CustomEvent会自动传递 event 参数，而第二个参数 { detail: 'Hello from Main' } 会作为 detail 参数传递到事件接收方。

示例一：微应用中使用vue时的 qiankun 找不到入口问题

在使用 qiankun 时，如果我们在微应用中使用了 Vue 框架，则需要借助 vue-router 实现路由配置。假设我们有一个 Vue 微应用，路由使用的是 Vue Router，我们需要对路由进行以下调整：

const router = new VueRouter({
  base: window.__POWERED_BY_QIANKUN__ ? '/sub' : '/',
  mode: 'history',
  routes
})

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app')

这里的调整主要针对路由的 base 配置项，如果当前是子应用，则 base 配置项应该设置为 /sub，否则置为空字符串即可。

示例二：使用 qiankun 时的多次注册问题

在使用 qiankun 时，我们需要保证注册微应用只调用一次，如果多次调用会出现找不到入口的问题。所以我们在主应用中需要如下进行调整：

// 将 registerMicroApps 方法调整为一次性注册
let isMicroAppRegistered = false;

function registerMicroApp() {
  if(isMicroAppRegistered) return;
  registerMicroApps([
    {
      name: 'sub-app',
      entry: '//localhost:8080',
      container: '#subApp',
      activeRule: '/sub'
    },
    // ...
  ]);
  isMicroAppRegistered = true;
}

// 在某个合适的时机调用 registerMicroApp 方法注册微应用

这里我们加入了一个判断变量 isMicroAppRegistered，确保 registerMicroApps 方法只被调用了一次。并且将 registerMicroApps 方法单独提取成一个函数，在合适的时机进行调用即可。