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

简介: 微应用框架-----乾坤

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({

相关文章
|
XML JSON JavaScript
【前端】Vue项目中 JSON 编辑器的使用
【前端】Vue项目中 JSON 编辑器的使用
4189 0
|
设计模式 资源调度 Kubernetes
微前端应用 乾坤 开发实践
乾坤作为一款微前端应用框架,可以有效的实现前端应用程序的模块化设计,代码复用和可维护性。下面我们来通过实际开发来看看乾坤的使用方式以及实践。
|
前端开发
在微前端qiankun中使用Vite你踩坑了吗?(下)
哈喽,我是树酱。之前搭建的微前端体系已经稳步运行将近两年了,最近遇到一些童鞋反馈。之前据说qiankun并不支持Vite打包的应用,那是不是我就无法使用了?
3350 0
在微前端qiankun中使用Vite你踩坑了吗?(下)
|
11月前
|
前端开发
10分钟弄懂微应用框架——乾坤,真香!
10分钟弄懂微应用框架——乾坤,真香!
411 2
|
缓存 资源调度 前端开发
微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用
微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用
2071 0
|
11月前
|
前端开发 JavaScript 开发者
qiankun(乾坤)微前端框架简介
qiankun(乾坤)微前端框架简介
1944 1
|
11月前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
619 2
|
10月前
|
JSON 搜索推荐 C++
vscode如何更改背景颜色主题,黑色或白色?
【11月更文挑战第16天】在 VS Code 中更改背景颜色主题,可通过三种方式实现:1) 使用快捷键 Ctrl+K 和 Ctrl+T(Mac 上为 Command+K 和 Command+T)选择主题;2) 通过菜单中的“管理”->“颜色主题”选项选择;3) 修改 settings.json 文件中的 "workbench.colorTheme" 属性。此外,用户还可从扩展市场安装更多主题以满足个性化需求。
22704 6
|
10月前
|
Java UED Spring
Springboot通过SSE实现实时消息返回
通过Spring Boot实现SSE,可以简单高效地将实时消息推送给客户端。虽然SSE有其限制,但对于许多实时消息推送场景而言,它提供了一种简洁而强大的解决方案。在实际开发中,根据具体需求选择合适的技术,可以提高系统的性能和用户体验。希望本文能帮助你深入理解Spring Boot中SSE的实现和应用。
4641 1
|
11月前
|
前端开发 JavaScript
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
1704 8