微前端qiankun的部署

本地开发

主应用配置启动端口

打开主应用项目
src/micro/app.js文件中查看子应用的端口号

/*** name: 微应用名称 - 具有唯一性* entry: 微应用入口 - 通过该地址加载微应用,本地与服服务器配置有区别* container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上* activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用*/{name: 'netmoni_child1',entry:origin + (ENV === 'development' ? ':31325' : '/child/netmoni_child1/'),container: '#child1_frame',activeRule: '/sub/child1',props: { ...msg } // 下发子应用的信息}

例如此端口号为31325

子应用配置启动端口

打开子应用项目
src/settings.js配置子应用启动端口：

module.exports = {//...其他配置/*** @type {String} ''* @description sub project port*/port: 31325
}

此端口需与主应用对应一致
分别启动运行主应用与子应用即可

测试环境部署：

场景 1：主应用和微应用部署到同一个服务器（同一个 IP 和端口）