使用micro-app将现有项目改造成微前端,对现有项目实现增量升级

news/2024/2/25 20:47:33/文章来源:https://blog.csdn.net/qq_25286361/article/details/135631095

使用micro-app将现有项目改造成微前端,对现有项目实现增量升级

基座应用

1、安装依赖

npm i @micro-zoe/micro-app --save

2、在入口引入

//main.js
import microApp from '@micro-zoe/micro-app'new Vue({
})
//在new Vue 下面执行
microApp.start()

3、新增一个vue页面文件,使用micro-app标签引入子应用

在项目建一个目录

<template><div class="main"><!--设置默认页面子应用加载后会默认渲染首页,但我们常常希望子应用加载后渲染指定的页面,此时可以设置defaultPage指定子应用渲染的页面https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/router?id=%e8%ae%be%e7%bd%ae%e9%bb%98%e8%ae%a4%e9%a1%b5%e9%9d%a2--><micro-app name="dashboards" url="http://aaaa-dev.aaaa.cn/child/vue3/index.html" default-page="/child/vue3/index.html#/algorithm/cpcDataReportOnlyId" /></div>
</template>
<script></script>
<style lang="scss">
</style>

4、分配一个路由给子应用

既然是基于现有系统改造,那系统当然支持新增菜单。

就是给上一个步骤的文件添加路由,就是你新增页面当然要新增路由一样的

1、添加一级菜单

在这里插入图片描述

2、添加二级菜单

在这里插入图片描述

3、加完vue代码,这个菜单就可以复用了哦

在这里插入图片描述

5、配置部署打包

基座应用不用动,原来是这个dist就是dist不用动

publicPath: '/',
outputDir: 'dist',

子应用

1、vue.config.js

添加headers

headers: {
"Access-Control-Allow-Origin": "*",
},

2、router.js

const router = new Router({base: window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL, //添加base
})

3、main.js

我没有引入 import ‘./utils/public-path’,也没新增 public-path这个文件

new Vue({})
改成
const app = new Vue({
})//const app = new Vue({}) 下面添加下面的代码
// 监听卸载操作
window.addEventListener('unmount', function() {app.$destroy()
})

4、注释子应用的耦合代码

将子应用的菜单、导航栏什么的注释掉就可以了

5、vue.config.js

修改子应用打包后地址

  publicPath: '/',outputDir: 'dist',改成下面的\|/outputDir: 'vue3',publicPath: '/child/vue3/',

6、.gitignore

加个不上传的目录

vue3/

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

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

相关文章

Nacos和Eureka比较、统一配置管理、Nacos热更新、多环境配置共享、Nacos集群搭建步骤

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、Nacos和eureka的对比二、统一配置管理二、Nacos热更新方式一方式二 三、多环境配置共享四、Nacos集群搭建步骤&#xff08;黑马springCloud的p29&#xff0…

SpringCloud 源码系列之全局 Fegin 日志收集(okHttpClient、httpClient)

SpringCloud 源码系列之全局 Fegin 日志收集&#xff08;okHttpClient、httpClient&#xff09;目录 HttpClient 全局日志收集思路切换成HttpClient验证配置效果HttpClient 全局日志收集源码分析看源码顺带产物okHttpClient 全局日志收集总结 接上文SpringCloud OpenFegin 底层…

Python爬虫---scrapy shell 调试

Scrapy shell是Scrapy提供的一个交互式shell工具&#xff0c;它可以帮助我们进行爬虫的开发和调试。可以使用它来测试xpath或css表达式&#xff0c;查看它们是如何工作的&#xff0c;以及它们从你试图抓取的网页中提取的数据。它允许你在编写spider时交互地测试表达式&#xff…

【QT】自定义对话框及其调用

目录 1 对话框的不同调用方式 2 对话框QWDialogSize的创建和使用 3 对话框QWDialogHeaders的创建和使用 4 对话框QWDialogLocate的创建与使用 5 利用信号与槽实现交互操作 1 对话框的不同调用方式 在一个应用程序设计中&#xff0c;为了实现一些特定的功能&#xff0c;必须设计…

UI设计中插画赏析和产品色彩分析

插画赏析&#xff1a; 1. 插画是设计的原创性和艺术性的基础 无论是印刷品、品牌设计还是UI界面&#xff0c;更加风格化的插画能够将不同的风格和创意加入其中&#xff0c;在激烈的竞争中更容易因此脱颖而出。留下用户才有转化。 2. 插画是视觉触发器&#xff0c;瞬间传达大量…

13 | 使用代理ip爬取安居客房源信息

这是一个简单的Python爬虫代码,用于从安居客网站爬取房地产信息。该爬虫使用了代理IP来绕过可能的封禁,并提供了一些基本的信息抽取功能。 如果访问过多,那么可能出现了验证码 对此,最好的方法就是换ip。 使用代理IP的主要目的是保护爬虫的稳定性和隐私。以下是一些常见的原…

8.临床预测模型验证——交叉验证/Bootstrap法

基本概念 交叉验证&#xff1a; 将一定比例的数据挑选出来作为训练集&#xff0c;将其余未选中的样本作为测试集&#xff0c;先在训练集中构建模型&#xff0c;再在测试集中做预测。 内部验证&#xff1a;手动将样本随机分为训练集和测试集&#xff0c;先在训练集中构建模型…

世邦通信 SPON IP网络对讲广播系统getzoneterminaldata.php 未授权访问

产品介绍 世邦通信SPON IP网络对讲广播系统采用领先的IPAudio™技术,将音频信号以数据包形式在局域网和广域网上进行传送,是一套纯数字传输系统。 漏洞描述 spon IP网络对讲广播系统getuserdata.php存在未授权访问漏洞&#xff0c;攻击者可通过该漏洞获取后台敏感数据。 资…

解决kali beef启动失败解问题

只限于出现这个提示的时候使用 卸载 ruby apt remove ruby 卸载 beef apt remove beef-xss 重新安装ruby apt-get install ruby apt-get install ruby-dev libpcap-dev gem install eventmachine 重新安装beef apt-get install beef-xss 弄完以上步骤如果还是不行就重启kali再试…

现代雷达车载应用——第3章 MIMO雷达技术 3.4节 自动驾驶使用的高分辨成像雷达

经典著作&#xff0c;值得一读&#xff0c;英文原版下载链接【免费】ModernRadarforAutomotiveApplications资源-CSDN文库。 3.4 自动驾驶使用的高分辨成像雷达 如今&#xff0c;许多专为ADAS功能设计的汽车雷达收发器&#xff0c;如NXP半导体的MR3003和德州仪器的AWR2243&…

力扣hot100 打家劫舍 DP 滚动数组

Problem: 198. 打家劫舍 文章目录 思路复杂度&#x1f496; Code&#x1f496; DP空间优化版 思路 &#x1f468;‍&#x1f3eb; 参考地址 复杂度 时间复杂度: O ( n ) O(n) O(n) 空间复杂度: O ( n ) O(n) O(n) &#x1f496; Code class Solution {public static …

七、Qt 信号和槽

在QT4以上的版本&#xff0c;在窗体上用可以通过选中控件&#xff0c;然后点击鼠标右键单击按钮&#xff0c;选择“转到槽”。可以自动创建信号和槽。 选择clicked(),并点击 ok Qt Creator会给头文件和代码文件自动添加 这个按钮的单击事件&#xff08;信号和槽&#xff09;。 …

【征服redis5】redis的Redisson客户端

目录 1 Redisson介绍 2. 与其他Java Redis客户端的比较 3.基本的配置与连接池 3.1 依赖和SDK 3.2 配置内容解析 4 实战案例&#xff1a;优雅的让Hash的某个Field过期 5 Redisson的强大功能 1 Redisson介绍 Redisson 最初由 GitHub 用户 “mrniko” 创建&#xff0c;并在…

蓝桥杯练习题(九)

&#x1f4d1;前言 本文主要是【算法】——蓝桥杯练习题&#xff08;九&#xff09;的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 …

网络基础学习(3):交换机

1.交换机结构 &#xff08;1&#xff09;网线接口和后面的电路部分加在一起称为一个端口&#xff0c;也就是说交换机的一个端口就相当于计算机上的一块网卡。 如果在计算机上安装多个网卡&#xff0c;并让网卡接收所有网络包&#xff0c;再安装具备交换机功能的软件&#xff0…

介绍下Redis?Redis有哪些数据类型?

一、Redis介绍 Redis全称&#xff08;Remote Dictionary Server&#xff09;本质上是一个Key-Value类型的内存数据库&#xff0c;整个数据库统统加载在内存当中进行操作&#xff0c;定期通过异步操作把数据库数据flush到硬盘上进行保存。因为是纯内存操作&#xff0c;Redis的性…

【零基础入门Python数据分析】Anaconda3 JupyterNotebookseaborn版

目录 一、安装环境 python介绍 anaconda介绍 jupyter notebook介绍 anaconda3 环境安装 解决JuPyter500&#xff1a;Internal Server Error问题-CSDN博客 Jupyter notebook快捷键操作大全 二、Python基础入门 数据类型与变量 数据类型 变量及赋值 布尔类型与逻辑运算…

【HarmonyOS】消息通知场景的实现

从今天开始&#xff0c;博主将开设一门新的专栏用来讲解市面上比较热门的技术 “鸿蒙开发”&#xff0c;对于刚接触这项技术的小伙伴在学习鸿蒙开发之前&#xff0c;有必要先了解一下鸿蒙&#xff0c;从你的角度来讲&#xff0c;你认为什么是鸿蒙呢&#xff1f;它出现的意义又是…

SpringAOP-说说 JDK动态代理和 CGLIB 代理

Spring 的 AOP 是通过动态代理来实现的&#xff0c;动态代理主要有两种方式 JDK 动态代理和 Cglib 动态代理&#xff0c;这两种动态代理的使用和原理有些不同。 JDK 动态代理 Interface&#xff1a;JDK动态代理是基于接口的代理&#xff0c;它要求目标类实现一个接口。Invoca…

通过OpenIddict设计一个授权服务器02-创建asp.net项目

在这一部分中&#xff0c;我们将创建一个ASPNET核心项目&#xff0c;作为我们授权服务器的最低设置。我们将使用MVC来提供页面&#xff0c;并将身份验证添加到项目中&#xff0c;包括一个基本的登录表单。 创建一个空的asp.net core项目 正如前一篇文章中所说&#xff0c;授权…