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

常见问题 - qiankun

目录

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

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

出现报错的场景:

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

使用 qiankun 集成应用时,出现的部分错误及解决方案_第1张图片

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

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

解决方案:

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

使用 qiankun 集成应用时,出现的部分错误及解决方案_第2张图片

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 集成应用时,出现的部分错误及解决方案_第3张图片

解决方案:

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

// 生命周期
export async function bootstrap(): Promise {
  console.log('[vue] vue app bootstraped');
}
 
export async function mount(props: { [keys: string]: any; } | undefined): Promise {
  console.log('[vue] props from main framework', props);
  render(props);
}
 
export async function unmount(): Promise {
  console.log('我离开啦');
  instance.unmount();
  instance._container.innerHTML = '';
  instance = null;
}

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

使用 qiankun 集成应用时,出现的部分错误及解决方案_第4张图片

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

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

 使用 qiankun 集成应用时,出现的部分错误及解决方案_第5张图片

解决方案:

① 如果是 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;
  },
};

你可能感兴趣的:(前端,javascript,vue.js)