微应用框架-----乾坤

vite.config.js

vite.config.js主应用部分：

1.安装乾坤

// 启动微前端配置
import './registerMicroApp'
2.新增配置文件

import { registerMicroApps, start } from 'qiankun'

registerMicroApps([
{
name: 'hmzs-big-screen', // 子应用名称
entry: '//localhost:5173', // 子应用运行服务地址（就是npm run dev时的那个地址）
container: '#container', // 挂载容器（id=container）
activeRule: '/big-screen' // 激活路由(在哪个路由下加载子应用,需要和子应用的路由名称对应)
}
])

start()
3.入口文件导入

// 启动微前端配置
import './registerMicroApp'
4.配置子应用渲染的位置

子应用：

说明: qiankun默认不支持vite项目作为子应用，需要借助 vite-qiankun 插件进行支持
1.配置vite-qiankun插件

npm i vite-plugin-qiankun -D
vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'

export default defineConfig({
base: '/',
plugins: [
vue(),
// 这里的名称要和主应用改造是配置项中的name保持一致
qiankun('hmzs-big-screen', {
useDevMode: true
})
],
server: {
// 防止开发阶段的assets 静态资源加载问题
origin: '//localhost:5173'
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
}
}
})

入口文档：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'

import './styles/common.scss'

// 使用乾坤渲染
renderWithQiankun({