微前端框架 qiankun 引入的问题列表

501 阅读1分钟

初始引入

快速精简入门

解决静态资源问题

创建public-path.js 然后在主入口引入 import './public-path'

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

webpack配置相关 参考地址

output: {
    publicPath: '项目运行路径'
}

解决application '子应用名字' died in status LOADING_SOURCE_CODE: Failed to feath

解决方案需要子应用允许跨域访问开发环境: webpack-devServer配置参考

devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*', // 允许跨域
    },
}

registerMicroApps(apps, lifeCycles?)

接解决给子应用传值

image.png

解决调用子应用时的生命周期用于做一些事情的函数

clipboard.png

start

clipboard (1).png

qiankun 常见问题列表

传送门

部署问题

开发时不需要一定要放在文件目录下,开发模式下,各应用可单独开发。部署时生产环境,看自己访问地址,是项目都是相同ip端口还是不同ip和端口

根据不同方式部署方式不一样:参考地址