qiankun微前端 主应用vue3+vite、子应用vue3+vite

qiankun 官网

项目目录结构

• qiankun-base 主应用 vue3 + vite
• qiankun-project-1 子应用 vue3 + vite
• qiankun-project-2 子应用 vue3 + vite
  
  
  

主应用

创建主应用：

• 创建vue3 + vite 项目：

npm create vue@latest

• 安装 Element-Plus 组件库

安装配置方法请看Element-Plus官网：https://cn.element-plus.org/zh-CN/

安装qiankun

npm install qiankun -S

配置qiankun

• 在 src 目录中创建 qiankun文件夹，并创建index.js 和 config.js文件：
• config.js 文件中配置子应用路由，示例代码如下：

export default {subApps: [{name: 'vue1', // 子应用名称，必须跟子应用 package.json 中的 name 一致entry: 'http://localhost:3001/vue1', // 子应用入口，本地环境下指定端口container: '#vue1', // 挂载子应用的 DOMactiveRule: '/vue1', // 路由匹配规则props: {}, // 主应用与子应用通信传值},{name: 'vue2', // 子应用名称，必须跟子应用 package.json 中的 name 一致entry: 'http://localhost:3002/vue2', // 子应用入口，本地环境下指定端口container: '#vue2', // 挂载子应用的 DOMactiveRule: '/vue2', // 路由匹配规则props: {}, // 主应用与子应用通信传值}]
}

• index.js 文件中注册子应用，并启动微服务，示例代码如下：

import { registerMicroApps, start } from 'qiankun'
import config from './config.js' // 引入的时候必须加 .js 要不然会报错const { subApps } = config// 注册子应用
export function registerApps() {try {registerMicroApps(subApps, {beforeLoad: [async app => {// console.log('before load', app)}],beforeMount: [async app => {// console.log('before mount', app)}],afterUnmount: [async app => {// console.log('before unmount', app)}]})} catch (err) {console.warn('qiankun 报错信息', err);}
}// 启动
export function qiankunStart() {registerApps()// 启动微服务start({sandbox: {experimentalStyleIsolation: true, // 样式隔离},})
}

挂载 qiankun

• 在main.js文件中挂载qiankun，示例代码如下：

// 引入qiankun配置
import { qiankunStart } from '@/qiankun/index.js'// 启动qiankun
qiankunStart()

添加子应用展示容器

• 在App.vue或者别的页面添加子应用展示容器，示例代码如下：

<!-- 菜单-->
<el-menu-item index="/vue1"><span>项目1</span></el-menu-item><el-menu-item index="/vue2"><span>项目2</span></el-menu-item><!--容器-->
<!-- 子应用容器 --><div id="vue1"></div><div id="vue2"></div>

• App.vue代码如下：

<template><div