qiankun 接入之子系统

2022-05-27 16:04:04 阅读：204 来源： 互联网

标签：调用 container 接入 qiankun export 应用 props async 子系统

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

/**
 * 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

标签：调用,container,接入,qiankun,export,应用,props,async,子系统
来源： https://www.cnblogs.com/linxue/p/16317930.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9