微前端qiankun打包部署

devtools/2025/2/22 13:53:46/

官网：API 说明 - qiankun

前提：后台项目，在主应用设置菜单，微应用渲染组件，没有使用路由跳转loadMicroApp

1.token需要使用setGlobalState，传参或者方法用的setGlobalState

2.打包没有使用Nginx

3.有需要新打开的跳转页面写在主应用中进行跳转

主应用设置成hash

javascript">const router = new VueRouter({mode: 'hash',base: process.env.BASE_URL,routes
})

4.方法传递：

javascript">// 主应用
import { setGlobalState } from 'qiankun';
handler(param){}
actions.setGlobalState({mainMethods: {some: this.handler}
});// 子应用,param是参数
// main.js
created() {onGlobalStateChange((state) => {this.$store.commit("setMainMethods", state.mainMethods);}, true);
},
// 实际页面中-（在需要打开新的菜单时使用）
const mainMethods = this.$store.state.mainMethods;
if (mainMethods && mainMethods.some) {mainMethods.some(param);
}

5.打包（打包花了我很长时间，不使用Nginx）

javascript">1.主应用入口配置：
<div :id="component">
</div>
let container = component;//页面中div的组件id值，取个唯一的let map = {}
if (process.env.NODE_ENV === 'development') {map = {file1: '8081',// 模块1file2: '8082', // 模块2};
} else if (process.env.NODE_ENV === 'production') {map = {file1: '/child/file1/index.html',// 模块1file2: '/child/file2/index.html', // 模块2};
}
// componentType是入口值，判断当前组件页面时那个微应用的，就打开哪个端口的微应用
const entry = process.env.NODE_ENV === 'development' ? `//localhost:${map[type]}` : map[type];
this.load[content] = loadMicroApp({name: component,//组件名称entry,//入口地址container: container,//页面中的组件渲染divprops: {// 传参，根据需要来onGlobalStateChange: actions.onGlobalStateChange,setGlobalState: actions.setGlobalState,  },
}, {sandbox: { experimentalStyleIsolation: false }
});
2.微应用配置vue.config.js：
publicPath: process.env.NODE_ENV === 'development'?'/':'/child/file1/',
3.打包目录结构
└── html/                     # 根文件夹|├── child/                # 存放所有微应用的文件夹|   ├── file1/            # 这个目录里面放文件就行了，不要再套一个dist|   ├── file2/     ├── index.html            # 主应用的index.html├── css/                  # 主应用的css文件夹├── js/                   # 主应用的js文件夹

仔细看qiankun官网就可以了，最重点的是，

我遇到如下报错：配置entry时要加上index.html（这是重点！！其他照着官网上来就可以了）