使用插件vite-plugin-qiankun
1.安装插件
pnpm add vite-plugin-qiankun
2.vite.config.ts 配置
import qiankun from 'vite-plugin-qiankun';
export default ({ mode }) =>
defineConfig({
plugins: [
...
.......
qiankun('console-ui', {
useDevMode: true
}),
],
......
......
server: {
port: 3000,
// 解决主应用icon样式问题
origin: '//localhost:3000'
},
......
})
3. 导出生命周期
vue3 main.ts
......
........
import { renderWithQiankun,qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
........
.........
async function setupApp(props= {}) {
app = createApp(App);
........
...........
if (qiankunWindow.__POWERED_BY_QIANKUN__) {
console.log('我正在作为子应用运行',props)
}
}
renderWithQiankun({
bootstrap() {
console.log("%c ", "color: green;", "sub-vite2-vue3 app bootstraped");
},
mount(props) {
setupApp(props);
},
unmount(props: any) {
app.unmount();
},
update(props: any) {
console.log('update我正在作为子应用运行', props);
}
});
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
setupApp({})
}
4. 配置路由前缀(routers)
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
const base = qiankunWindow.__POWERED_BY_QIANKUN__ ? "/PKCE" : "/"
// qiankunWindow.__POWERED_BY_QIANKUN__ 可以判断是否作为子应用打开
5.当作为子应用时,应用根据需求做相应的调整