qiankun 常见问题集合(一)

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？

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

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

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

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

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

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

1. 通过history.pushState()方式进行跳转

<button onClick={() => {
    window.history.pushState({
       user: { 
         name: `张三${new Date().getTime()}`,
         age: 18,
         sex: '男' 
       }
     }, '', '/app1')}
 }>跳转第一个微应用</button>

2. 将主应用的路由实例传递给子应用，子应用使用主应用实例进行跳转；