当前位置：首页 > news >正文

qiankun实现微前端，vue3为主应用，分别引入vue2和vue3微应用

news 2025/8/16 3:09:12

1、vue3主应用配置

1、安装 qiankun

yarn add qiankun # 或者 npm i qiankun -S

2、在主应用中注册微应用

import { registerMicroApps, start } from "qiankun"
const apps = [{  name: 'vue2App', // 应用名称   xs_yiqing_vue2entry: '//localhost:8080', // vue 应用的入口地址  container: '#vue2Container', // 挂载的子应用容器  activeRule: '/vue2App', // 激活子应用的路由规则   //访问子应用的规则，比如：主应用为localhost:8080，那访问该子应用的url应为localhost:8080/vue2Appprops: { user: 'LZQ' }, // 初始化参数 },  {  name: 'vue3App', // 应用名称  xs_faren_vue3entry: '//localhost:8888', // React 应用的入口地址  container: '#vue3Container', // 挂载的子应用容器  activeRule: '/vue3App', // 激活子应用的路由规则  },  // 可以添加更多子应用配置  ];  //注册子应用
registerMicroApps(apps);  //启动
start();

3、在App.vue中定义挂载微应用的容器

<template><div id="app">  <router-view/><!-- 子应用渲染区，用于挂载子应用节点 --><div id="vue2Container"></div><div id="vue3Container"></div></div>  
</template>

通过以上三个步骤，完成主应用配置。

2、vue2微应用配置

1、安装 qiankun

yarn add qiankun # 或者 npm i qiankun -S

2、在src下新建文件public-path.js

if (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;}

3、main.js配置

import './public-path'; // qiankunlet router = null;
let instance = null;
function render(props = {}) {const { container } = props;router = new VueRouter({base: window.__POWERED_BY_QIANKUN__ ? '/vue2App/' : '/',mode: 'history',routes,});instance = new Vue({i18n,router,store,render: (h) => h(App),}).$mount(container ? container.querySelector('#app') : '#app');
}// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {render();
}export async function bootstrap(props) {console.log('[vue] vue app bootstraped');console.log(props);
}
export async function mount(props) {console.log('[vue] props from main framework', props);render(props);
}
export async function unmount() {instance.$destroy();instance.$el.innerHTML = '';instance = null;router = null;
}

4、vue.config.js配置

 devServer: {headers: {'Access-Control-Allow-Origin': '*',},
},configureWebpack: { // qiankunoutput: {library: `vue2App`,libraryTarget: 'umd', // 把微应用打包成 umd 库格式jsonpFunction: `webpackJsonp_vue2App`, // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal},},

3、vue3微应用配置

1、安装 qiankun

yarn add vite-plugin-qiankun  或者 npm install vite-plugin-qianku

3、main.ts配置

import { createApp } from 'vue';
import {renderWithQiankun,qiankunWindow,QiankunProps,
} from 'vite-plugin-qiankun/dist/helper'const app = createApp(App);
const render = (props: QiankunProps = {}) => {const { container } = propsconst app2: string | Element = container?.querySelector('#app') || '#app' // 避免 id 重复导致微应用挂载失败app.mount(app2)}const initQianKun = () => {renderWithQiankun({bootstrap() {console.log('微应用：bootstrap')},mount(props) {// 获取主应用传入数据console.log('微应用：mount', props)render(props)},unmount(props) {console.log('微应用：unmount', props)},update(props) {console.log('微应用：update', props)},})}qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render() // 判断是否使用 qiankun ，保证项目可以独立运行

3、vue.config.ts配置

import { defineConfig } from 'vite'
import qiankun from 'vite-plugin-qiankun'export default defineConfig((mode) => {return {plugins: [qiankun('vue3App', { // 微应用名字，与主应用注册的微应用名字保持一致useDevMode: true,}),],}
})

4、路由配置

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
// app router
export const router = createRouter({history: createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/vue3App' : '/'),
});