解决webpack5.x接入qiankun微前端报```You need to... lifecycles in xxx entry```

770 阅读1分钟

升级完webpack到5.64.3, webpack-dev-server到4.5.0后报如上错误 官方解决方案 github上的解决方案 以上两个都全试过, 问题依然存在, 所以 我在 main.js中

window.appRender= (props = {}) => {...你的render函数....}

在index.html中(要在你的app.js插入位置之后)一般的构建工具(各种cli或者手写的app.js是插入在body标签内, 所以你可以写在body标签之后)

  <script entry>(function() {
    (function (win) {
      win['purehtml'] = {
        bootstrap: () => {
          console.log('purehtml bootstrap');
        },
        update: (obj) => {
          // obj.run(win, Vue, window.__QIANKUN_SUB_APP_VM__ )
          return Promise.resolve();
        },
        mount: (props) => {
          console.log('purehtml mount');
          return win.appRender(props);
        },
        unmount: () => {
          console.log('purehtml unmount');
        },
      };
    })(window);
  })(window)</script>

就行了, 亲测完美运行, 思路就是: 1: 乾坤是个单页应用 所以肯定是共享全局对象的 2: 乾坤会在子项目的生命周期中调用在子项目中申明的对应的生命周期函数 所以有了如上解决思路,