使用 qiankun 集成应用时，出现的部分错误及解决方案

原创已于 2022-05-21 11:48:17 修改 · 3.7w 阅读

44 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

微前端

于 2021-08-31 09:43:38 首次发布

本文总结了微前端框架qiankun在实际应用中遇到的常见问题及解决方案，包括子应用CND引入错误、监听窗口变化、手动加载微应用报错、激活规则设置、生命周期函数缺失、容器不存在以及跨域问题等，并提供了相应的解决策略和配置示例。

1. [import-html-entry]: error occurs while executing entry script

2. 在子应用中，监听浏览器窗口变化

3. 手动加载微应用报错 single-spa minified message #31，see ...

4. 打包微前端项目后，激活不了微应用，也不报错

5. 缺少生命周期 you need to export lifecycle functions in qiankun-vue entry

6. 目标容器不存在 Target container with #mico-app not existed after qiankun-vue mounted

7. 微前端跨域问题 Access to fetch at 'http://...' from origin 'http://...' has been blocked by CORS policy

常见问题 - qiankunhttps://qiankun.umijs.org/zh/faq

1. [import-html-entry]: error occurs while executing entry script

出现报错的场景：

子应用使用 CND 的方式引用依赖时，集成到基座应用中报错

所有的这种报错第一句都是，但这仅仅是提示报错位置，第二句才是真正的错误

[import-html-entry]: error occurs while executing entry script

解决方案：

子应用的 script 标签加上 ignore 属性

参考 qiankun issues

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

2. 在子应用中，监听浏览器窗口变化

window.proxy 中，有个方法 —— addEventListener，可以用原生js 监听窗口变化

(window as any).proxy.addEventListener('resize', () => {
	console.log('用 原生js 监听窗口变化');
});

3. 手动加载微应用报错 single-spa minified message #31，see ...

出现报错的场景：

手动加载微应用后，未进行卸载，就切换路由；再次调手动加载微应用后就会报错，微应用出不来了

解决方案：

页面离开前，卸载微应用

onBeforeUnmount(() => {
    state.microApp.unmount(); // state.microApp 为微应用实例
});

4. 打包微前端项目后，激活不了微应用，也不报错

分析原因：

如果主应用和微应用在不同的文件夹中，且使用 hash 模式；

直接写 activeRule: '#/vue' 就会不生效，导致微应用激活不了；

解决方案：

将 activeRule 改为以下写法

const getActiveRule = (hash) => (location) => location.hash.startsWith(hash);
registerMicroApps([
  {
    name: 'app-hash',
    entry: 'http://localhost:8080',
    container: '#container',
    activeRule: getActiveRule('#/vue'),
  },
]);

5. 缺少生命周期 you need to export lifecycle functions in qiankun-vue entry

解决方案：

在入口文件增加 qiankun 的生命周期函数

// 生命周期
export async function bootstrap(): Promise<void> {
  console.log('[vue] vue app bootstraped');
}

export async function mount(props: { [keys: string]: any; } | undefined): Promise<void> {
  console.log('[vue] props from main framework', props);
  render(props);
}

export async function unmount(): Promise<void> {
  console.log('我离开啦');
  instance.unmount();
  instance._container.innerHTML = '';
  instance = null;
}

6. 目标容器不存在 Target container with #mico-app not existed after qiankun-vue mounted

存放微应用的容器不存在，检查代码

7. 微前端跨域问题 Access to fetch at 'http://...' from origin 'http://...' has been blocked by CORS policy

解决方案：

① 如果是 vue 项目，在 vue.config.js 中，增加允许跨域的配置

module.exports = {
  devServer: {
    // 配置跨域请求头，解决开发环境的跨域问题
    headers: {
      'Access-Control-Allow-Origin': '*', // 允许所有域名的脚本访问该资源
    },
  },
}

② 如果是 react 项目，在 .rescriptsrc.js 中，增加允许跨域的配置


module.exports = {
  devServer: (_) => {
    const config = _;

    config.headers = {
      'Access-Control-Allow-Origin': '*',
    };
    config.historyApiFallback = true;
    config.hot = false;
    config.watchContentBase = false;
    config.liveReload = false;

    return config;
  },
};

标签

#qiankun