使⽤qiankun集成应⽤时，出现的部分错误及解决⽅案⽬录
1. [import-html-entry]: error occurs while executing entry script
出现报错的场景：
⼦应⽤使⽤ CND 的⽅式引⽤依赖时，集成到基座应⽤中报错
所有的这种报错第⼀句都是，但这仅仅是提⽰报错位置，第⼆句才是真正的错误
[import-html-entry]: error occurs while executing entry script
解决⽅案：
⼦应⽤的 script 标签加上 ignore 属性
参考 qiankun issues
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: '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 '...' from origin '...' has been blocked by CORS policy
解决⽅案：
① 如果是 vue 项⽬，在 fig.js 中，增加允许跨域的配置
devServer: {
// 配置跨域请求头，解决开发环境的跨域问题
headers: {
'Access-Control-Allow-Origin': '*', // 允许所有域名的脚本访问该资源
},
},为什么使用bootstrap?
}
② 如果是 react 项⽬，在 .rescriptsrc.js 中，增加允许跨域的配置
devServer: (_) => {
const config = _;
config.headers = {
'Access-Control-Allow-Origin': '*',    };
config.historyApiFallback = true;    config.hot = false;
config.watchContentBase = false;    config.liveReload = false;
return config;
},
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。