qiankun 接入之子系统

入口文件增加乾坤生命周期钩子导入

/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
  console.log('react app bootstraped');
}

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  ReactDOM.render(<App />, 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);
}

修改入口文件初始化方法

子应用需要单独运行的场景下，用window.__POWERED_BY_QIANKUN__来判断是否调用初始化方法，如果是 qiankun 下， 只在 mount 方法里面调用。

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
    initVueApp();
}

配置webpack

在 vue.config.js 里面加入配置：

configureWebpack: {
    output: {
        library: `workOrder-[name]`,
        libraryTarget: 'umd', // 把微应用打包成 umd 库格式
        jsonpFunction: `webpackJsonp_workOrder`,
    }
}

解决本地开发跨域问题

本地开发的时候，主应用加载微应用会产生资源跨域的问题，需要在微应用的 devServer 里面进行一下配置。

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

修改静态资源的相对路径

因为qiankun会加载子应用的静态资源，如果使用相对路径，则会导致子应用的资源加载失败。需要改成绝对路径，需要将资源路径改成绝对路径。

// vue.config.js
{
    publicPath: process.env.VUE_APP_STATIC_PUBLIC_PATH,
}

使用问题记录

NET::ERR_CERT_AUTHORITY_INVALID

如果使用 https 启动本地服务，可能会出现如下证书错误的问题。
参考解决方案：
https://blog.csdn.net/qq_44231797/article/details/109555580

qiankun 载入子应用会去掉子应用的 script 标签

如果项目中的 html 模板里面有 script 标签的，改成 js 文件引入，或者动态插入吧。