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

那我来详细讲解如何解决 "qiankun 找不到入口问题"。

问题背景

qiankun 是一个前端微服务框架，可以实现不同应用之间的动态加载和通信。但是，在使用 qiankun 的过程中，有时会遇到 找不到应用入口 的问题，这会导致应用无法正确加载。

解决步骤

1. 确认应用路径是否正确

首先确认引用路径是否正确。在主应用中，qiankun 会在指定路径下查找子应用的入口文件。因此，子应用的 entry 配置项必须正确地指向入口文件路径。

举个例子，如果子应用的入口文件是 main.js，那么在 entry 中应该配置为：

entry: '//localhost:8080/main.js'

其中 //localhost:8080 是子应用的运行地址。

2. 确认子应用是否正确暴露生命周期钩子

在子应用中，需要正确地暴露生命周期钩子，以便 qiankun 能够正确地加载和卸载子应用。

举个例子，下面是暴露生命周期钩子的示例代码：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app',
    entry: '//localhost:8080',
    container: '#subapp-container',
    activeRule: '/app',
    props: {
      key: 'value',
    },
  },
]);

start();

在上面的代码中，registerMicroApps 方法用于注册子应用，并指定了子应用的名称、入口地址、容器选择器等配置信息。然后调用 start 方法启动 qiankun，从而加载子应用。

3. 确认主应用中是否正确渲染子应用

最后，需要检查主应用中是否正确渲染子应用。

举个例子，在主应用的html页面中，需要添加一个容器来渲染子应用：

<div id="subapp-container"></div>

然后，在主应用中需要使用以下代码来渲染子应用：

import { loadMicroApp } from 'qiankun';

loadMicroApp({
  name: 'app',
  entry: '//localhost:8080',
  container: '#subapp-container',
  props: {
    key: 'value',
  },
});

在上面的代码中，loadMicroApp 方法用于加载子应用并渲染到指定的容器中。

示例说明

示例一：确认应用路径是否正确

假设子应用的入口文件是 main.js，在主应用中的 entry 配置出现错误，在子应用加载时会出现 找不到应用入口 的错误。正确的配置应该是：

entry: '//localhost:8080/main.js'

示例二：确认子应用是否正确暴露生命周期钩子

假设子应用忘记在代码中暴露生命周期钩子，在加载应用时会出现 生命周期钩子不存在 的错误。正确的代码示例应该是：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app',
    entry: '//localhost:8080',
    container: '#subapp-container',
    activeRule: '/app',
    props: {
      key: 'value',
    },
  },
]);

function bootstrap(props) {
  console.log('bootstrap');
}

function mount(props) {
  console.log('mount');
}

function unmount(props) {
  console.log('unmount');
}

const app = {
  bootstrap,
  mount,
  unmount,
};

export default app;

start();

在上面的代码中，我们正确地暴露了生命周期钩子，在子应用启动时就可以正确地加载并渲染了。

总结

以上是解决 qiankun 找不到入口问题 的完整攻略，如果你按照上述步骤操作，应该可以轻松解决这个问题。细节方面需要注意一下，比如应用路径和钩子的正确使用。