qiankun:vite/webpack项目配置

相关博文:
https://juejin.cn/post/7216536069285429285?searchId=202403091501088BACFF113F980BA3B5F3

https://www.bilibili.com/video/BV12T411q7dq/?spm_id_from=333.337.search-card.all.click

qiankun结构:

主应用base:vue3+history+vite
子应用sub-react:react+history+webpack
子应用sub-vue:vue3+history+vite
子应用sub-vue2:vue2+base+webpack
在这里插入图片描述



❀ 主应用base

1、安装qiankun

yarn add qiankun # 或者 npm i qiankun -S

2、存放子应用信息

/src/utils/qiankun-config.js

export default {subApps: [{name: 'sub-react', // 子应用名称,跟package.json一致entry: process.env.NODE_ENV === 'development'? '//localhost:3101': '//react.qk.com', // 子应用入口,本地环境下指定端口container: '#sub-app', // 挂载子应用的domactiveRule: '/sub-react', // 路由匹配规则props: {} // 主应用与子应用通信传值},{name: 'sub-vue',entry: process.env.NODE_ENV === 'development'? '//localhost:3100': '//vue3.qk.com',container: '#sub-app',activeRule: '/sub-vue',props: {}},{name: 'sub-vue2',entry: process.env.NODE_ENV === 'development'? '//localhost:3103': '//vue2.qk.com',container: '#sub-app',activeRule: '/sub-vue2',props: {}}]}

3、开启qiankun

/src/utils/qiankun

import { registerMicroApps, initGlobalState } from 'qiankun'
import config from './qiankun-config'const { subApps } = configexport function registerApps() {try {registerMicroApps(subApps, {beforeLoad: [app => {console.log('before load', app)return Promise.resolve()}],beforeMount: [app => {console.log('before mount', app)return Promise.resolve()}],afterUnmount: [app => {console.log('before unmount', app)return Promise.resolve()}]})const actions = initGlobalState(state);// 主项目项目监听和修改actions.onGlobalStateChange((state, prev) => {// state: 变更后的状态; prev 变更前的状态console.log('主项目项目监听变化:',state, prev);});actions.setGlobalState(state);} catch (err) {console.log('qiankunError',err)}
}

4、新建一个组件,用于加载子应用

/src/page/container.vue

<template><div id="sub-app"></div>
</template><script lang="ts">
import { start } from 'qiankun'
import { registerApps } from '@/utils/qiankun'export default {mounted() {if (!window.__POWERED_BY_QIANKUN__) {window.qiankunStarted = trueregisterApps();start({sandbox: {experimentalStyleIsolation: true // 样式隔离}})}else{window.__POWERED_BY_QIANKUN__.on('mount', loadMicroApps);  如果一个页面同时展示多个微应用,需要使用 loadMicroApp 来加载。}}}
</script>

5、配置路由

export const router = createRouter({history: createWebHistory(),routes: [{path: '/',redirect: '/home',meta: {show: false}},{path: '/home',name: 'home',meta: {cnName: '首页',show: true},component: () => import('@/page/home.vue')},{path: '/about',name: 'about',meta: {cnName: '关于',show: true,keepAlive: true},component: () => import('@/page/about.vue')},{path: '/news/:id/:title/:content',name: 'news',meta: {cnName: '新闻',show: true},component: () => import('@/page/news.vue')},{path: '/communication',name: 'communication',meta: {cnName: '练习',show: true},component: () => import('@/page/communication.vue')},{// history模式需要通配所有路由,详见vue-router文档path: '/sub-react/:pathMatch(.*)*',name: 'sub-react',meta: {path:'/sub-react', // 注意:meta里的这个path是用来供router-link使用的,不用上面的path是因为点击主应用菜单跳转到子应用的时候默认带上了通配符cnName: 'sub-react',show: true,key: 'sub-react',},component: () => import('@/page/container.vue'),},{// history模式需要通配所有路由,详见vue-router文档path: '/sub-vue/:pathMatch(.*)*',name: 'sub-vue',meta: {path:'/sub-vue',cnName: 'sub-vue',show: true,key: 'sub-vue',},component: () => import('@/page/container.vue'),},{path: '/sub-vue2',name: 'sub-vue2',meta: {path:'/sub-vue2/', // 如果不加上最后的“/”,则域名会变成:http://localhost:8080/sub-vue2#/logincnName: 'sub-vue2',show: true,key: 'sub-vue2',},component: () => import('@/page/container.vue'),}]
})

*注意:meta里的这个path是用来供router-link使用的,不用上面的path是因为点击主应用菜单跳转到子应用的时候默认带上了通配符
在这里插入图片描述

6、首页 src/App.vue 放置 router-view

<template><header><router-linkv-for="item in routes":key="item.path":to="item.meta.path ? item.meta.path : item.path"><span>{{ item.meta?.cnName }}</span></router-link><router-view v-slot="{Component}" v-show="!$route.meta.key"><keep-alive><component :is="Component" v-if="$route.meta.keepAlive" /></keep-alive><component :is="Component" v-if="!$route.meta.keepAlive" /></router-view></header>
</template>


❀ vite子应用配置(sub-vue)

一、安装vite-plugin-qiankun(vue项目才需要安装)

npm i vite-plugin-qiankun --save-dev

二、修改vite.config.js

sub-vue 修改vite.config.js

export default defineConfig({// base: '/sub-vue',plugins: [vue(),vueJsx(),qiankun('sub-vue', {   // 配置qiankun插件useDevMode: true}),],server: {host: 'localhost',port: 3100,origin: 'http://localhost:3100/',headers: {'Access-Control-Allow-Origin': '*'}}
})


❀ webpack子应用配置(sub-react、sub-vue2)

一、修改webpack配置文件

sub-react

// 在根目录下新增config-overrides.js文件并新增如下配置
const { name } = require("./package");module.exports = {webpack: (config) => {config.output.library = `sub-react`;config.output.libraryTarget = "umd";config.output.chunkLoadingGlobal = `webpackJsonp_${name}`;return config;},devServer: (_) => {const config = _;// config.publicPath = "http://loaclhost:3101";config.headers = {'Access-Control-Allow-Origin': '*',};return config;},
};

sub-vue2

const { name } = require('./package.json')
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,configureWebpack: {output: {library: `sub-vue2`,libraryTarget: 'umd', // 把微应用打包成 umd 库格式// jsonpFunction: `webpackJsonp_${name}`,  // webpack5没有jsonpFunction这个optionschunkLoadingGlobal: `webpackJsonp_${name}`},},devServer:{host: 'localhost',port: 3103,headers: {'Access-Control-Allow-Origin': '*',}}
})

二、配置public-path(解决子应用图片默认取主应用的路径)

sub-reactsub-vue2 src文件下添加public-path.js

if (window.__POWERED_BY_QIANKUN__) {// eslint-disable-next-line no-undef__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

并在入口文件的第一行!!!引入它
sub-react——src——index.js
在这里插入图片描述
sub-vue2——src——main.js
在这里插入图片描述

❀ history路由入口规则(sub-vue、sub-react)

sub-vue

import { createRouter, createWebHistory } from 'vue-router'
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'const routes = [{path: '/',redirect: { name: 'List' },meta: { title: '首页' },children: [{path: '/list',name: 'List',component: () => import('../views/List.vue')},{path: '/detail',name: 'Detail',component: () => import('../views/Detail.vue')}]},
]const router = createRouter({history: createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/sub-vue/' : '/'),routes
})export default router

sub-react好像不需要配置,直接在App.js添加router和link

<div className='menu'><Link to={'/'}>list</Link><Link to={'/detail'}>detail</Link><a onClick={goVue}>vue列表页</a>
</div>
<Routes><Route path='/' element={<List />} /><Route path='/detail' element={<Detail />} />
</Routes>

❀ 配置生命周期(所有子组件)

sub-react——src——index.js

import './public-path.js'   // public-path处理子应用里的图片地址默认取主应用的路径
import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';import App from './App';
import { BrowserRouter } from 'react-router-dom'
import reportWebVitals from './reportWebVitals';let root;
// 将render方法用函数包裹,供后续主应用与独立运行调用
function render(props) {const { container } = propsconst dom = container ? container.querySelector('#root') : document.getElementById('root')root = createRoot(dom)if(!container){root.render(<BrowserRouter><App/></BrowserRouter>)return}root.render(<BrowserRouter basename='/sub-react'>   // 设置路由base<App/></BrowserRouter>)
}// 判断是否在qiankun环境下,非qiankun环境下独立运行
if (!window.__POWERED_BY_QIANKUN__) {render({});
}// 各个生命周期
// bootstrap 只会在微应用初始化的时候调用一次,下次微应用重新进入时会直接调用 mount 钩子,不会再重复触发 bootstrap。
export async function bootstrap() {console.log('react app bootstraped');
}// 应用每次进入都会调用 mount 方法,通常我们在这里触发应用的渲染方法
export async function mount(props) {render(props);
}// 应用每次 切出/卸载 会调用的方法,通常在这里我们会卸载微应用的应用实例
export async function unmount(props) {root.unmount();
}// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

sub-vue——src——main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import {renderWithQiankun,qiankunWindow
} from 'vite-plugin-qiankun/dist/helper'let app:anyconst render = (container) => {app = createApp(App)app.use(router).mount(container ? container.querySelector('#app') : '#app')
}const initQianKun = () => {renderWithQiankun({mount(props) {const { container } = propsrender(container)},bootstrap() {},unmount() {app.unmount()}})
}qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render()

sub-vue2——src——main.js

import './public-path'
import Vue from 'vue'
import App from './App.vue'
import router from './router';Vue.config.productionTip = falselet instance = nullfunction render(props = {}) {const { container } = propsinstance = new Vue({router,render: h => h(App)}).$mount(container ? container.querySelector('#app') : '#app')
}if (!window.__POWERED_BY_QIANKUN__) {render();
}export async function bootstrap() {console.log(' vue2 app bootstraped')
}
export async function mount(props) {console.log(' props from main framework', props);render(props)
}
export async function unmount() {instance.$destroy()instance.$el.innerHTML = ''instance = null
}

❀ 踩坑点:

子应用切换时出现以下警告:(我没遇到)
在这里插入图片描述
主应用增加:

router.beforeEach((to, from, next) => {if (!window.history.state.current) window.history.state.current = to.fullPathif (!window.history.state.back) window.history.state.back = from.fullPath// 手动修改history的statereturn next()
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/744871.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3.1_8 两级页表

文章目录 3.1_8 两级页表&#xff08;一&#xff09;单级页表存在的问题&#xff08;二&#xff09;如何解决单级页表的问题&#xff1f;&#xff08;三&#xff09;两级页表的原理、地址结构&#xff08;四&#xff09;如何实现地址变换&#xff08;五&#xff09;需要注意的几…

基于51单片机的数控直流可调电源设计[proteus仿真]

181基于51单片机的数控直流可调电源设计[proteus仿真] 电源系统这个题目算是课程设计和毕业设计中常见的题目了&#xff0c;本期是一个基于51单片机的数控直流可调电源设计 需要的源文件和程序的小伙伴可以关注公众号【阿目分享嵌入式】&#xff0c;赞赏任意文章 2&#xffe…

动态内存管理(下)

1.C/C程序的内存开辟 C/C程序内存分配的几个区域&#xff1a; 1. 栈区&#xff08;stack&#xff09;&#xff1a;在执行函数时&#xff0c;函数内局部变量的存储单元都可以在栈上创建&#xff0c;函数执行结束时这些存储单元自动被释放。栈内存分配运算内置于处理器的指令集中…

谈谈你对Java平台的理解?

从你接触 Java 开发到现在&#xff0c;你对 Java 最直观的印象是什么呢&#xff1f;是它宣传的 “Write once, run anywhere”&#xff0c;还是目前看已经有些过于形式主义的语法呢&#xff1f;你对于 Java 平台到底了解到什么程度&#xff1f;请你先停下来总结思考一下。 今天…

TikTok新手如何起号?环境因素与内容创新技巧

相信很多刚入行的TikTok玩家都遇到过一个难题&#xff0c;那就是账号权重低&#xff0c;播放量在个位数徘徊&#xff0c;其实都是因为还没起号&#xff01;那么具体如何起号呢&#xff1f;下面小编也给大家分享一下技巧。 一、如何起号 1、明确注册 TikTok 账号的目的 无论是…

怎么把mp4转换成amv格式?如何下载amv格式视频?

MP4&#xff08;MPEG-4 Part 14&#xff09;是一种通用的视频文件格式&#xff0c;广泛用于多媒体应用。作为MPEG-4标准的一部分&#xff0c;MP4以其卓越的压缩性能、出色的视频质量和广泛的兼容性成为当前最流行的视频格式之一。 AMV文件格式的介绍 AMV文件格式起源于中国公司…

深入理解JAVA异常(自定义异常)

目录 异常的概念与体系结构 异常的概念&#xff1a; 异常的体系结构&#xff1a; 异常的分类&#xff1a; 异常的处理 防御式编程 LBYL: EAFP: 异常的抛出 异常的捕获 异常声明throws try-catch捕获并处理 finally 面试题&#xff1a; 异常的处理流程 异常处…

计算机网络——OSI网络层次模型

计算机网络——OSI网络层次模型 应用层表示层会话层传输层TCP和UDP协议复用分用 网络层数据链路层物理层OSI网络层次模型中的硬件设备MAC地址和IP地址MAC地址IP地址MAC地址和IP地址区别 OSI网络层次模型通信过程解释端到端点到点端到端和点到点的区别 我们之前简单介绍了一下网…

sqllab第十三关通关笔记

知识点&#xff1a; 登录框处常见的语句(一般都是查询语句) where usernamewhere username""where usernam()where username("")错误注入知识回顾这里使用错误注入 通过admin admin登录发现没有任何回显信息&#xff1b;但是有成功登录的提示 通过bp抓包…

CSPM有必要换吗?目前持有PMP?

从事项目管理岗位的&#xff0c;尤其是国企工作的&#xff0c;建议换一个&#xff0c;但是有进一步发展打算的&#xff0c;可以直接考CSPM-3级更好&#xff0c;PMP持证增持的是CSPM-2级证书&#xff0c;相对来说是个初级证书&#xff0c;CSPM-3级含金量更高。 一、什么是 CSPM…

美众议院通过强制要求 TikTok 剥离的法案; 首个 AI 软件工程师上线丨 RTE 开发者日报 Vol.165

开发者朋友们大家好&#xff1a; 这里是**「RTE 开发者日报」**&#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE&#xff08;Real Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 …

交换机/路由器的存储介质-华为

交换机/路由器的存储介质-华为 本文主要介绍网络设备的存储介质组成。 SDRAM&#xff08;同步动态随机存取内存&#xff09; 系统运行内存&#xff0c;相当于电脑的内存&#xff1b; NVRAM&#xff08;Non-Volatile Random Access Memory&#xff0c;非易失性随机访问存储器…

高等数学相关知识点整理汇总

说明&#xff1a;由于工作原因可能更新不及时&#xff0c;内容逐步完善中… 一、空间解析几何与向量代数 二、多元函数的微分学 三、重积分 四、曲线积分与曲面积分 五、常微分方程 六、无穷级数

基于HarmonyOS ArkTS中秋国庆祝福程序、以代码之名,写阖家团圆祝福

中秋、国庆双节将至&#xff0c;作为程序员&#xff0c;以代码之名&#xff0c;表达对于阖家团圆的祝福。本节将演示如何在基于HarmonyOS ArkUI的SwiperController、Image、Swiper等组件来实现节日祝福轮播程序。 规则要求具体要求如下&#xff1a; 1、根据主题&#xff0c;用…

Flutter 核心原理 - UI 框架(UI Framework)

Flutter 既能保证很高的开发效率&#xff0c;又能获得很好的性能。 这两年 Flutter 技术热度持续提高&#xff0c;整个 Flutter 生态和社区也发生了翻天覆地的变化。目前Flutter 稳定版发布到了3.0&#xff0c;现在已经支持移动端、Web端和PC端&#xff0c;通过Flutter 开发的…

sql注入重学

sql基本操作 基本查询语句 union (必须得是前面的列与后面的列相同才可以查询&#xff09; 看第二局uses表中的列有3列&#xff0c;而emails中的列只有两列&#xff0c;所有无法成功查询 这就相当于我们再加了一列 group by &#xff08;分组&#xff09; 相当于将其分为10列…

力扣大厂热门面试算法题 24-26

24. 两两交换链表中的节点&#xff0c;25. K 个一组翻转链表&#xff0c;26. 删除有序数组中的重复项&#xff0c;每题做详细思路梳理&#xff0c;配套Python&Java双语代码&#xff0c; 2024.03.14 可通过leetcode所有测试用例。 目录 24. 两两交换链表中的节点 解题思路…

硬盘新建分区时选4096扇区 是4K对齐吗?

环境&#xff1a; 固态硬盘 问题描述&#xff1a; 硬盘新建分区时或者格式化选4096扇区 是4K对齐吗 解决方案&#xff1a; 1.选择4096扇区大小&#xff0c;实际上是进行了4K对齐。在传统硬盘格式化时&#xff0c;通常会选择以4096字节&#xff08;4K&#xff09;为单位的扇…

html--钢琴

代码 <!DOCTYPE html> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> <title>html钢琴</title> <script src"js/js.js"></script> <link href"…

CVE-2022-1310:RegExp[@@replace] missing write barrier lead a UAF

文章目录 环境搭建漏洞分析漏洞利用漏洞触发链RCE原语构造 总结参考 环境搭建 嗯&#xff0c;这里不知道是不是环境搭建的有问题&#xff0c;笔者最后成功的实现了任意地址读写&#xff0c;但是任意读写的存在限制&#xff0c;任意写 wasm 的 RWX 区域时会直接报错&#xff0c…