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>
- 将主应用的路由实例传递给子应用,子应用使用主应用实例进行跳转;