微前端qiankun接入Vue和React项目

主应用：Vue3+Webpack

1、创建主应用：

npx vue create main-vue3-app

2、安装qiankun

npx yarn add qiankun

3、项目中使用的vue、vue-router、qiankun依赖如下，webpack版本为5.x

4、在根目录下创建vue.config.js

const { defineConfig } = require('@vue/cli-service');
const packageName = require('./package.json').name;
module.exports = defineConfig({lintOnSave: false,devServer: {// 可以在配置中 配置端口 VUE_APP_PORT = 8080port: 8080,headers: {'Access-Control-Allow-Origin': '*' // 允许跨域访问子应用页面}}
})

5、入口组件App.vue

<template><nav><router-link to="/">Home</router-link> |<router-link to="/vue2-webpack-app">wepback+vue2App</router-link> |<router-link to="/vue3-vite-app">vite+vue3App</router-link> |<router-link to="/vue3-webpack-app">wepback+vue3App</router-link> |<router-link to="/react-webpack-app">wepback+reactApp</router-link> </nav><router-view/>
</template><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}nav {padding: 30px;
}nav a {font-weight: bold;color: #2c3e50;
}nav a.router-link-exact-active {color: #42b983;
}
</style>

6、然后创建微应用对应的路由页面以及注册微应用

router.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'const routes: Array<RouteRecordRaw> = [{path: '/',name: 'index',component: () => import('../views/Index.vue')},{path: '/vue2-webpack-app/:chapters*',name: 'vue2-webpack-app',component: () => import('../views/Vue2App.vue')},{path: '/vue3-vite-app/:chapters*',name: 'vue3-vite-app',component: () => import('../views/ViteApp.vue')},{path: '/vue3-webpack-app/:chapters*',name: 'vue3-webpack-app',component: () => import('../views/Vue3App.vue')},{path: '/react-webpack-app/:chapters*',name: 'react-webpack-app',component: () => import('../views/ReactWebpack.vue')}
]const router = createRouter({history: createWebHistory(),routes
})export default router

微应用：Vue2+Webpack

1、在主应用下创建对应的路由页面 views/Vue2App.vue

<template><div id="vue2-webpack-app"/>
</template><script setup lang="ts">
import { onMounted, ref } from 'vue';
import { registerMicroApps, start } from 'qiankun';const loading = ref(false);
registerMicroApps([{name: 'vue2-webpack-app',entry: '//localhost:8081/',container: '#vue2-webpack-app',activeRule: '/vue2-webpack-app',}
]);
onMounted(() => {if (!window['qiankunStarted']) {window['qiankunStarted'] = true;start();}
});
</script><style scoped></style>

2、创建vue2+webpack项目，选2.x版本

npx vue create vue2-app

3、项目中使用的vue、vue-router依赖如下，webpack版本为5.x

4、在根目录下创建vue.config.js

const { defineConfig } = require('@vue/cli-service');
const packageName = require('./package.json').name;
module.exports = defineConfig({lintOnSave: false,devServer: {// 可以在配置中 配置端口 VUE_APP_PORT = 8080port: 8081,headers: {'Access-Control-Allow-Origin': '*' // 允许跨域访问子应用页面}},configureWebpack: {output: {library: `${packageName}-[name]`,libraryTarget: 'umd',chunkLoadingGlobal: `webpackJsonp_${packageName}`,},}
})

5、在src根目录下创建public-path.js

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

6、router/index.ts

import Vue from 'vue'
import VueRouter from 'vue-router'
import IndexVue from '../views/Index.vue'Vue.use(VueRouter)const routes= [{path: '/',name: 'index',component: IndexVue// component: () => import( '@/views/Index.vue')},
]
console.log(window.__POWERED_BY_QIANKUN__)
const router = new VueRouter({mode: 'history',base: window.__POWERED_BY_QIANKUN__ ? '/vue2-webpack-app' : '/',routes
})export default router

7.入口文件main.ts/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router';
import './public-path'Vue.config.productionTip = false
let instance:any = null;function render(props:any = {}) {const { container } = propsinstance = new Vue({name: 'root',router,render: h => h(App)}).$mount(container ? container.querySelector('#app') : '#app')}if (!window.__POWERED_BY_QIANKUN__) {render()
}
/**
* bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
* 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
*/
export async function bootstrap() {console.log('vue2+webpack bootstraped');
}/**
* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
*/
export async function mount(props:unknown) {// ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));console.log('乾坤子应用容器加载完成，开始渲染 child')console.log('props from main mount', props)render(props)
}/**
* 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
*/
export async function unmount() {instance?.$destroy();}/**
* 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
*/
export async function update(props:unknown) {console.log('update props', props);
}

微应用：Vue3+Wepback

1、在主应用下创建对应的路由页面 views/Vue3App.vue

<template><div id="vue3-webpack-app"  />
</template><script setup lang="ts">
import { onMounted, ref } from 'vue';
import { registerMicroApps, start } from 'qiankun';const loading = ref(false);
registerMicroApps([{name: 'vue3-webpack-app',entry: '//localhost:8082/',container: '#vue3-webpack-app',activeRule: '/vue3-webpack-app',}
]);
onMounted(() => {if (!window['qiankunStarted']) {window['qiankunStarted'] = true;start({prefetch:false,sandbox:{experimentalStyleIsolation:true}});}
});
</script><style scoped></style>

2、创建vue3+webpack项目，选3.x版本

npx vue create vue3-webpack-app

3、项目中使用的vue、vue-router依赖如下，webpack版本为5.x

4、在根目录下创建vue.config.js

const { defineConfig } = require('@vue/cli-service');
const packageName = require('./package.json').name;
const path = require('path');
module.exports = defineConfig({lintOnSave: false,devServer: {// 可以在配置中 配置端口 VUE_APP_PORT = 8080port: 8082,headers: {'Access-Control-Allow-Origin': '*' // 允许跨域访问子应用页面}},configureWebpack: {output: {library: `${packageName}-[name]`,libraryTarget: 'umd',chunkLoadingGlobal: `webpackJsonp_${packageName}`,},resolve:{alias:{'@':path.join(__dirname,'src')}}}
})

5、在src根目录下创建public-path.js

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

6、router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import IndexView from '../views/Index.vue'const routes: Array<RouteRecordRaw> = [{path: '/',name: 'index',component: IndexView// component: () => import('../views/Index.vue')}
]const router = createRouter({history: createWebHistory(window.__POWERED_BY_QIANKUN__?'/vue3-webpack-app':process.env.BASE_URL),routes
})export default router

7.入口文件main.ts/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './public-path'let app: any = null
function render(props: any = {}) {app = createApp(App)const { container } = propsapp.use(router).mount(container ? container.querySelector('#app') : '#app')
}if (!window.__POWERED_BY_QIANKUN__) {render()
}export async function bootstrap() {console.log('vue3+webpack bootstraped');
}/**
* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
*/
export async function mount(props: unknown) {// ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));console.log('乾坤子应用容器加载完成，开始渲染 child')console.log('props from main mount', props)render(props)
}/**
* 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
*/
export async function unmount() {console.log('unmount-------------------')app.unmount()app = null}/**
* 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
*/
export async function update(props: unknown) {console.log('update props', props);
}

微应用：Vue3+Vite

1、在主应用下创建对应的路由页面 views/ViteApp.vue

<template><div id="vue3-vite-app"  />
</template><script setup lang="ts">
import { onMounted, ref } from 'vue';
import { registerMicroApps, start } from 'qiankun';const loading = ref(false);
registerMicroApps([{name: 'vue3-vite-app',entry: '//localhost:5173/',container: '#vue3-vite-app',activeRule: '/vue3-vite-app',}
]);
onMounted(() => {if (!window['qiankunStarted']) {window['qiankunStarted'] = true;start();}
});
</script><style scoped></style>

2、创建vue3+vite项目

npx pnpm create vite vue3-vite-app --template vue-ts

3、项目中使用的vue、vue-router依赖如下，vite版本为4.x

4、安装vite-plugin-qiankun插件

npx pnpm add vite-plugin-qiankun

在vite.config.ts使用

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'import qiankun from 'vite-plugin-qiankun';
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue() ,qiankun('vue3-vite-app', {useDevMode: true}),],})

5、router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import {qiankunWindow
} from 'vite-plugin-qiankun/dist/helper';const router = createRouter({history: createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/vue3-vite-app' : '/'),routes: [{path: '/',name: 'index',component: () => import(/* webpackChunkName: "index" */ '../views/Index.vue')}]
})export default router

6、在src根目录下创建public-path.js

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

7、main.ts

import { createApp } from 'vue'
import './public-path'import App from './App.vue'
import router from './router'import {renderWithQiankun,qiankunWindow} from 'vite-plugin-qiankun/dist/helper';let app:any;if (!qiankunWindow.__POWERED_BY_QIANKUN__) {createApp(App).use(router).mount('#app');} else {renderWithQiankun({mount(props) {console.log('--mount');console.log(props)app = createApp(App);app.use(router).mount((props.container? props.container.querySelector('#app'): document.getElementById('app')) as Element);},bootstrap() {console.log('--bootstrap');},update() {console.log('--update');},unmount() {console.log('--unmount');app?.unmount();}});}

微应用：React 18+Webpack

1、在主应用下创建对应的路由页面 views/ReactWebpack.vue

<template><div id="react-webpack-app"/>
</template><script setup lang="ts">
import { onMounted, ref } from 'vue';
import { registerMicroApps, start } from 'qiankun';const loading = ref(false);
registerMicroApps([{name: 'react-webpack-app',entry: '//localhost:3000/',container: '#react-webpack-app',activeRule: '/react-webpack-app',}
]);
onMounted(() => {if (!window['qiankunStarted']) {window['qiankunStarted'] = true;start();}
});
</script><style scoped></style>

2、创建React+Webpack项目

npx create-react-app react-app

3、项目中使用的react、react-dom、react-router-dom依赖如下，webpack版本为5.x

4、创建config-overrides.js，修改配置

 npm i react-scripts

修改package.json

5、封装路由组件，src/router/index.js

import React from 'react'import Home from '../views/home'
// 导入路由依赖
import { Route,Routes} from 'react-router-dom'export default function Router(){return (// 使用BrowserRouter包裹，配置路由<Routes ><Route element={<Home/>} path='/'></Route></Routes>)
}

6、在App.jsx中引入路由组件

import Router from './router/index'
import './App.css';
function App() {return (<div><Router></Router></div>);
}
export default App;

7、index.js入口

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom'
import './index.css';
import App from './App';
import './public-path';
import reportWebVitals from './reportWebVitals';
// let root = createRoot(document.querySelector('#root'))
let root = null;
function render (props) {const { container } = props;root = root || ReactDOM.createRoot(container ? container.querySelector("#root") : document.getElementById("root") );root.render(<BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? "/react-webpack-app" : "/"}><React.StrictMode><App /></React.StrictMode></BrowserRouter>);
}if (!window.__POWERED_BY_QIANKUN__) {render({});
}export async function bootstrap () {console.log("[react18] react app bootstraped");
}export async function mount (props) {console.log("[react18] props from main framework", props);render(props);
}export async function unmount (props) {root.unmount();root = null;
}reportWebVitals();

演示：

待上传

完整代码：

待上传

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

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

相关文章

【第25例】IPD体系进阶：需求分析团队RAT

【第25例】IPD体系进阶：需求分析团队RAT

目录 简介 RAT CSDN学院相关内容推荐 作者简介 简介 RAT是英文Requirement Analysis Team英文首字母的简称，也即需求分析团队，每个产品线都需要设定对应的一个RAT的组织。 RAT主要负责产品领域内需求的分析活动，是RMT的支撑团队： 这个时候可以将RAT细化为PL-RAT团队，…
阅读更多...
云原生架构设计理论与实践

云原生架构设计理论与实践

云原生架构设计理论与实践 云原生架构概述 云原生的背景 云原生定义和特征 云原生架构的设计原则 架构模式 服务化架构模式 Mesh化架构模式 Serverless模式 存储计算分离模式 分布式事务模式 可观测架构 事件驱动架构 云原生架构相关技术 容器技术 云原生微服务技术 无服务…
阅读更多...
MessageQueue 深入理解Android卷2 学习笔记

MessageQueue 深入理解Android卷2 学习笔记

MessageQueue类封装了与消息队列有关的操作&#xff0c;一个以消息驱动的系统中&#xff0c;最重要部分就是消息队列和消息处理循环。 MessageQueue的核心代码在native层&#xff0c;可以处理java和native的事件 1.1MessageQueue创建 构造方法&#xff0c;调用nativeInit fra…
阅读更多...
CVE-2021-44228 Apache log4j 远程命令执行漏洞

CVE-2021-44228 Apache log4j 远程命令执行漏洞

一、漏洞原理 log4j(log for java)是由Java编写的可靠、灵活的日志框架&#xff0c;是Apache旗下的一个开源项目&#xff0c;使用Log4j&#xff0c;我们更加方便的记录了日志信息&#xff0c;它不但能控制日志输出的目的地&#xff0c;也能控制日志输出的内容格式&#xff1b;…
阅读更多...
CSDN学院 ＜ 华为战略方法论进阶课 ＞ 正式上线！

CSDN学院 ＜ 华为战略方法论进阶课 ＞ 正式上线！

目录 你将收获 适用人群 课程内容 内容目录 CSDN学院 作者简介 你将收获 提升职场技能提升战略规划的能力实现多元化发展综合能力进阶 适用人群 主要适合公司中高层、创业者、产品经理、咨询顾问&#xff0c;以及致力于改变现状的学员。 课程内容 本期课程主要介绍华为…
阅读更多...
不同网段的IP怎么互通

不同网段的IP怎么互通

最近在整理工作的时候发现一个不同网段无法互通的问题&#xff0c;就是我们大家熟知的一级路由和二级路由无法互通的问题。由于需要记录整个过程的完整性&#xff0c;这里也需要详细记录下整个过程&#xff0c;明白的人不用看&#xff0c;可以直接跳过&#xff0c;到解决方法去…
阅读更多...
Windows 和 Linux 这2个系统在进行编程实现的时候的一些区别：

Windows 和 Linux 这2个系统在进行编程实现的时候的一些区别：

很惭愧&#xff0c;学了很多年才意识到&#xff0c;噢&#xff0c;原来这两个系统实现一些功能的时候会使用到不同的库&#xff0c;使用不同的函数。 那么&#xff0c;也会延伸出一些问题&#xff1a; 比如&#xff0c;如何实现版本的迁移。一个在Linux上运行的代码如何可以比…
阅读更多...
C#WPF嵌入字体实例

C#WPF嵌入字体实例

本文介绍C#WPF嵌入字体实例。 首先创建项目 添加Resources文件夹，添加字体文件，字体文件属性：生成操作为Resources，复制到输出目录：不复制 字体的使用可以采用以下两种方法： 方式一 直接引用 FontFamily="./Resources/#幼圆" 方式二 定义资源 <Applica…
阅读更多...
【面试经典150 | 栈】简化路径

【面试经典150 | 栈】简化路径

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;字符串数组模拟栈 其他语言python3 写在最后 Tag 【栈】【字符串】 题目来源 71. 简化路径 题目解读 将 Unix 风格的绝对路径转化成更加简洁的规范路径。字符串中会出现 字母、数字、/、_、. 和 .. 这几种字符&#…
阅读更多...
阿里云企业邮箱基于Spring Boot快速实现发送邮件功能

阿里云企业邮箱基于Spring Boot快速实现发送邮件功能

邮件在项目中经常会被用到&#xff0c;比如用邮件发送通知。比如&#xff0c;通过邮件注册、认证、找回密码、系统报警通知、报表信息等。本篇文章带大家通过SpringBoot快速实现一个发送邮件的功能。 邮件协议 下面先简单了解一下常见的邮件协议。常用的电子邮件协议有SMTP、…
阅读更多...
基于springboot,vue学生宿舍管理系统

基于springboot,vue学生宿舍管理系统

开发工具&#xff1a;IDEA 服务器&#xff1a;Tomcat9.0&#xff0c; jdk1.8 项目构建&#xff1a;maven 数据库&#xff1a;mysql5.7 系统分前后台&#xff0c;项目采用前后端分离 前端技术&#xff1a;vuevue-element-admin 服务端技术&#xff1a;springboot,mybatis…
阅读更多...
express session JWT JSON Web Token

express session JWT JSON Web Token

了解 Session 认证的局限性 Session 认证机制需要配合 cookie 才能实现。由于 Cookie 默认不支持跨域访问&#xff0c;所以&#xff0c;当涉及到前端跨域请求后端接口的时候&#xff0c;需要做很多额外的配置&#xff0c;才能实现跨域 Session 认证。 注意&#xff1a; 当前端…
阅读更多...
层次式架构的设计理论与实践

层次式架构的设计理论与实践

层次式架构的设计理论与实践 层次式架构概述 层次式架构的定义和特性 定义 特性 层次式架构的一般组成(表现层、中间层、数据访问层和数据层) 表现层框架设计 设计模式 MVC MVP MVVM XML技术 UIP设计思想 表现层动态生成设计思想(基于XML界面管理技术) 中间层架构设计 业务…
阅读更多...
macOS 12 Monterey v12.7.1正式版：开启全新的操作系统体验

macOS 12 Monterey v12.7.1正式版：开启全新的操作系统体验

macOS 12 Monterey已经向所有兼容的Mac设备推出&#xff0c;为您带来了一系列强大的新功能和改进。这个全新的操作系统版本&#xff0c;不仅带来了更流畅的用户体验&#xff0c;还增强了与iOS设备的无缝集成&#xff0c;让您的设备使用更加高效&#xff0c;更加便捷。 macOS 1…
阅读更多...
NVM 安装及使用

NVM 安装及使用

1.安装 我使用的是解压版&#xff0c;免安装 github下载压缩包 下载后放在一个【没有中文】的文件夹下&#xff0c;解压 然后需要配环境变量&#xff0c; 首先添加两个变量&#xff0c;分别是刚刚nvm解压的路径&#xff0c;和当前node安装的路径。 然后编辑path变量&#x…
阅读更多...
牛客网刷题-(5)

牛客网刷题-(5)

&#x1f308;write in front&#x1f308; &#x1f9f8;大家好&#xff0c;我是Aileen&#x1f9f8;.希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流. &#x1f194;本文由Aileen_0v0&#x1f9f8; 原创 CSDN首发&#x1f412; 如…
阅读更多...
贝锐花生壳内网穿透推出全新功能，远程业务连接更安全

贝锐花生壳内网穿透推出全新功能，远程业务连接更安全

贝锐旗下内网穿透兼动态域名解析品牌花生壳目前推出了全新的“访问控制”功能&#xff0c;可精确设置访问权限&#xff0c;充分保障信息安全&#xff0c;满足更多用户安全远程访问内网服务的需求。 通过这一功能&#xff0c;可实现指定时间、IP、地区等条件下才能远程访问映射的…
阅读更多...
算法通过村第十六关-滑动窗口|黄金笔记|结合堆的应用

算法通过村第十六关-滑动窗口|黄金笔记|结合堆的应用

文章目录 前言堆与滑动窗口结合的问题总结 前言 提示&#xff1a;不论记忆多么痛苦&#xff0c;它属于过去&#xff0c;已经逝去了&#xff0c;我们为什么还执着于它并让它代表我们&#xff1f;我们就这样&#xff0c;所以&#xff0c;我们受苦。 --丹津葩默 这个还是一个比较重…
阅读更多...
进程/线程/PCB

进程/线程/PCB

进程&#xff1a;正在运行中的程序&#xff08;进程是驻留在内存中的&#xff09; 是系统执行资源分配和调度的独立单位每一个进程都有属于自己的存储空间和系统资源注意&#xff1a;进程A 和 进程B 的内存独立不共享 使用jdk自带的工具&#xff0c;jconsole查看当前Java进程中…
阅读更多...
CentOS 编译安装 nginx

CentOS 编译安装 nginx

CentOS 编译安装 nginx 修改 yum 源地址为 阿里云 curl -o /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repoyum makecache升级内核和软件 yum -y update安装常用软件和依赖 yum -y install gcc gcc-c make cmake zlib zlib-devel openss…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023