微前端qiankun的部署
微前端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
}
此端口需与主应用对应一致
分别启动运行主应用与子应用即可