qiankun 常见问题集合(一)_ai4code

irpas 02-07 5258

qiankun 常见问题集合(一)

1. loader.js:220 Uncaught (in promise) Error: [qiankun] You need to export lifecycle functions in app4 entry

答: 此问题由于微应用中没有暴漏qiankuan的生命周期；需要在微应用工程中加入相关的生命周期函数；具体位置应为微应用中webpack的entry 值指向的js文件中添加即可；

export async function bootstrap() { console.log('react app bootstraped'); } /** * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法 */ export async function mount(props) { ReactDOM.render(<App {...props}/>, props.container ? props.container.querySelector('#root') : document.getElementById('root')); } /** * 应用每次切出/卸载会调用的方法，通常在这里我们会卸载微应用的应用实例 */ export async function unmount(props) { ReactDOM.unmountComponentAtNode( props.container ? props.container.querySelector('#root') : document.getElementById('root'), ); } /** * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效 */ export async function update(props) { console.log('update props', props); }

2. Access to fetch at ‘http://localhost:3000/’ from origin ‘http://localhost:8000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

答: 由于qiankun框架解析微应用使用 import-html-entry库通过fetch请求相关资源，所以需要微应用支持跨域访问；在webpack devServer中加入以下代码即可

headers: { 'Access-Control-Allow-Origin': '*' },

3. 微应用打包之后 css 中的字体文件和图片加载 404？

答：目前官方关于资源文件加载推荐两种方式

所有图片等静态资源上传至 cdn，css 中直接引用 cdn 地址；借助 webpack 的 url-loader 将字体文件和图片打包成 base64（适用于字体文件和图片体积小的项目）

4. 如何判断微应用是否运行在主应用壳子中？

答：qiankun框架提供了window.__POWERED_BY_QIANKUN__全局变量进行区分是否运行在qiankun框架容器中；

5. qiankun框架中微应用之间如何跳转？

答：qiankun框架提供两种跳转方式

通过history.pushState()方式进行跳转 <button onClick={() => { window.history.pushState({ user: { name: `张三${new Date().getTime()}`, age: 18, sex: '男' } }, '', '/app1')} }>跳转第一个微应用</button> 将主应用的路由实例传递给子应用，子应用使用主应用实例进行跳转；