微前端qiankun的部署
- 本地开发
- 主应用配置启动端口
- 子应用配置启动端口
- 测试环境部署:
- 场景 1:主应用和微应用部署到同一个服务器(同一个 IP 和端口)
- 微应用都放在在一个特殊名称(不会和微应用重名)的文件夹下
- 主应用配置
- 子应用配置
- 配置nginx
本地开发
主应用配置启动端口
打开主应用项目
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
}
此端口需与主应用对应一致
分别启动运行主应用与子应用即可