续上篇 qiankun 微前端配置

上篇文章地址:微前端框架 qiankun 配置使用【基于 vue/react脚手架创建项目 】-CSDN博客

主应用:

src/main.js  配置:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { registerMicroApps, start } from 'qiankun';registerMicroApps([{name: 'react app', // app name registeredentry: 'http://localhost:3000/index.js',container: '#react',activeRule: '/react',sandbox: {strictStyleIsolation: true // 开启样式隔离}},{name: 'vue app',entry: 'http://localhost:8888/',container: '#vue',activeRule: '/vue',sandbox: {strictStyleIsolation: true // 开启样式隔离}},
]);start();
Vue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')

src/App.vue  配置:

<template><div>qiankun<router-link to="/vue">vue</router-link><router-link to="/react">react</router-link><router-view v-show="$route.name"></router-view><div id="vue"></div><div id="react"></div></div>
</template><style>
</style>

vue微应用:

src/main.js 配置:

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
let instance = null;
function render(props) {console.log(props);// props 组件通信instance = new Vue({render: h => h(App)}).$mount('#app') // 这里是挂载到自己的HTML中,基座会拿到这个挂载后的HTML,将其插入进去
}if (!window.__POWERED_BY_QIANKUN__) { // 如果是独立运行,则手动调用渲染render();
}
if(window.__POWERED_BY_QIANKUN__){ // 如果是qiankun使用到了,则会动态注入路径// __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}// 根据 qiankun 的协议需要导出 bootstrap/mount/unmount
export async function bootstrap(props) {console.log(props);
}
export async function mount(props) {render(props);
}
export async function unmount(props) {console.log(props);instance.$destroy();
}

vue.config.js  配置:

module.exports = {devServer: {port: 8888,headers:{'Access-Control-Allow-Origin': '*' // 允许跨域}},configureWebpack: {output: {library: 'vue app',//这里的名称和主应用的name一致!!!libraryTarget: 'umd'}}
};

react微应用:

src/index.js  配置

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';function render(){ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root'));
}
if(!window.__POWERED_BY_QIANKUN__){render();
}
export async function bootstrap(){}
export async function mount() {render()
}
export async function unmount(){ReactDOM.unmountComponentAtNode( document.getElementById('root'));
}

config/webpack.config.js  配置

如果没有可以看看我的另一篇文章:react 项目如何暴露 webpack配置文件-CSDN博客

在output配置下加入:

library: `react app`,//和主应用配置的name一致
libraryTarget: 'umd'

如图:

 vue:

 react:

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

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

相关文章

【小程序开发】蓝牙设备API——单点蓝牙应用程序编程接口整理(二)

ty.device.getBLEDeviceRSSI 获取 BLE 外设的信号 需引入DeviceKit&#xff0c;且在>1.2.6版本才可使用 参数 Object object 属性类型默认值必填说明deviceIdstring是设备模型 deviceId 设备 Idcompletefunction否接口调用结束的回调函数&#xff08;调用成功、失败都会执…

jar读取目录配置、打包jar后无法获取目录下的配置

jar读取目录配置、打包jar后无法获取目录下的配置 jar读取目录配置、打包jar后无法获取目录下的配置。java打成jar包后获取不到配置文件路径。解决项目打成jar包上线无法读取配置文件。打包jar后无法读取resource下的配置文件 场景 需要读取 src/main/resources/mapper下的所…

大机中的汇编语言该怎么学

提起程序开发&#xff0c;就不得不说合久必分&#xff0c;分久必合&#xff0c;反成各个程序段之间都有这个关系&#xff0c;而多个程序又组成一个功能组&#xff0c;可以完成一项业务&#xff0c;ASM比JCL难很多&#xff0c;因为它涉及到地址和业务。 一 ASM 的难度如何 比方…

UGUI界面性能优化3-合理规划界面层级结构

在Unity中&#xff0c;UGUI&#xff08;Unity GUI&#xff09;是一种用于创建用户界面的工具。合理规划界面层级结构对于开发一个可维护和易于使用的界面非常重要。以下是一种合理的UGUI界面层级结构规划方式&#xff1a; Canvas&#xff08;画布&#xff09;&#xff1a;Canva…

【python】flask框架的生命周期,多种查询参数的获取方式

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

python图形化编程pygame游戏模块

文章目录&#xff1a; 一&#xff1a;语句使用模板 基本框架 1.安装Pygame 2.创建一个主窗口display 3.图像渲染与动画 4.鼠标事件mouse 5.声音和音乐sound 6.设置屏幕背景颜色fill 7.添加文字font 8.绘制图形draw 8.1 绘制多边形polygon 8.2 绘制直线line 8.3 绘…

探索编程迷宫:选择你的职业赛道

在现代科技的浪潮中&#xff0c;程序员的职业赛道就像是一座迷宫&#xff0c;充满着前端的美丽花园&#xff0c;后端的黑暗洞穴&#xff0c;以及数据科学的神秘密室。这个迷宫中&#xff0c;每一条通道都充满了挑战和机遇&#xff0c;而每一个行走其中的人都在寻找着属于自己的…

LM studio使用gemmar聊天小试

通过LM studio可以方便的使用各种模型&#xff0c;使用LM提供的chat界面或者是使用python代码。 试试代码 在windows下使用python简单一试&#xff0c;例子直接复制LM界面上的代码&#xff1a; 用pip安装 openai包在LM界面 Start Server 需要安装 openai包。 本地电脑是I7…

C++ GUI库FLTK的基本使用

文章目录 1. Ubuntu下FLTK编译和使用2. Windows下FLTK编译使用 1. Ubuntu下FLTK编译和使用 编译源码 安装依赖 sudo apt install libx11-dev sudo apt install cmake make编译 # 进入源码目录fltk-1.3.9 mkdir build cd build cmake .. make库文件位于build/lib中 准备头文件#…

【如何关闭Windows自动更新的6种方法】

关闭Windows自动更新的6种方法 1. 前言2. 方法1&#xff1a;使用本地组策略编辑器&#xff08;适用于Windows 10 Pro和Enterprise版本&#xff09;3. 方法2&#xff1a;使用注册表编辑器4. 方法3&#xff1a;服务管理5. 方法4&#xff1a;使用控制面板&#xff08;仅适用于Wind…

【Golang星辰图】Go语言驾驭物联网:探索MQTT、CoAP、GPIO、串口、TLS和UDP的实现

打通物联网通信路&#xff1a;Go语言实现MQTT、CoAP、GPIO、串口、TLS和UDP协议详解 前言 物联网&#xff08;IoT&#xff09;的快速发展给设备间的通信提出了新的需求。本文将介绍使用Go语言实现物联网常用通信协议的相关库&#xff0c;包括MQTT、CoAP、GPIO、串口、TLS和UD…

服务器时间不准确的风险

1.误导系统记录&#xff1a;服务器时间不准确会误导系统记录文件的创建时间&#xff0c;导致文件的顺序发生变化。这对于需要按照时间顺序处理文件的系统来说&#xff0c;可能会引发严重的问题。 2.影响任务执行&#xff1a;对于有时间依赖的任务&#xff0c;服务器时间不准确会…

[c++]内存管理

1. C/C内存分布 我们先来看下面的一段代码和相关问题 int globalVar 1; static int staticGlobalVar 1; void Test() { static int staticVar 1; int localVar 1; int num1[10] { 1, 2, 3, 4 }; char char2[] "abcd"; const char* pChar3 "abcd"; …

C++11 新特性:常量表达式 constexpr(上)

C11 引入了constexpr关键字&#xff0c;用于定义常量表达式&#xff0c;从而使变量获得在编译阶段即可计算出结果的能力&#xff0c;提高运行时的效率。 constexpr 的使用分两篇文章介绍&#xff0c;今天这篇文章主要讲解什么是常量表达式和 constexpr 典型使用场景的前三种用…

分布式事务的解决方案--Seata架构

一、Seata的XA模式 二、AT模式原理 三、TCC模式原理 四、MQ分布式事务 异步&#xff0c;非实时&#xff0c;实现最终的一致性。 四、分布式事务的解决方案

Stable Diffusion WebUI 生成参数:宽度/高度/生成批次/每批数量/提示词相关性/随机种子

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 大家好&#xff0c;我是水滴~~ 本文将继续了解 Stable Diffusion WebUI 的生成参数&#xff0c;主要内容有&#xff1a;宽度、高度、生成批次、每批数量、提示词相关性、随机种子。希望能对你…

Visual Studio 2022下配置 OpenMP 多线程编程环境与运行

目录 一创建项目时选择“创建新项目 -> 空项目 -> 下一步 -> 创建” 二右键“源文件 -> 添加 -> 新建项 -> 添加” 三配置 1. 测试程序&#xff1a; 最开始的时候错误很多&#xff1a; 2.将 “ include "stdafx.h" ” 删掉&#xff0c;添加 “…

电影院售票网站|基于SSM框架+ Mysql+Java+ B/S结构的电影院售票网站设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含java&#xff0c;ssm&#xff0c;springboot的平台设计与实现项目系统开发资源&#xff08;可…

linux安装mysql8.x

检查卸载mysql 1.查看当前安装mysql情况&#xff0c;查找以前是否装有mysql [rootmaster01 /]# rpm -qa|grep -i mysql mysql-libs-5.1.73-8.el6_8.x86_642.执行命令删除安装的MySQL [rootmaster01 /]# rpm -ev mysql-libs-5.1.73-8.el6_8.x86_64 --nodeps3.查看之前安装的MySQ…

操作系统知识-存储管理+文件管理管理-嵌入式系统设计师备考笔记

0、前言 本专栏为个人备考软考嵌入式系统设计师的复习笔记&#xff0c;未经本人许可&#xff0c;请勿转载&#xff0c;如发现本笔记内容的错误还望各位不吝赐教&#xff08;笔记内容可能有误怕产生错误引导&#xff09;。 本章的主要内容见下图&#xff1a; 1、存储管理&#…