Vite + vue作为子应用接入qiankun微前端

最新推荐文章于 2025-05-13 15:29:27 发布

pingwei_deng

最新推荐文章于 2025-05-13 15:29:27 发布

阅读量865

点赞数

CC 4.0 BY-SA版权

分类专栏： qiankun 文章标签：前端 javascript vite qiankun vue

本文链接：https://blog.csdn.net/pingwei_deng/article/details/127989806

qiankun 专栏收录该内容

2 篇文章

订阅专栏

使用插件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__    可以判断是否作为子应用打开