废话不多说先了解下在实践。

1. 什么是微前端

web应用构建方式

微前端

微前端在2016年ThoughtWorks Technology Radar正式被提出。微服务这个被广泛应用于服务端的技术范式扩展到前端领域。现代的前端应用的发展趋势正在变得越来越富功能化，富交互化，也就是SPA应用；这样越来越复杂的单体前端应用，背后的后端应用则是数量庞大的微服务集群。

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

2.使用微前端的场景

随着需求的不断跨大，可能前端的服务也在不断增加，但是随着业务的增加，需要将整个系统重新发布，造成的是资源的浪费，如果能够每次只需要发布新的子系统，不需要发布整个系统就好了；
而现有的技术中，我们可以通过Iframe引入所谓的子系统，但是该方式存在无可忽视的缺陷，下面会提到，所以随着技术的发展，出现了微前端的概念与实现

3.微前端实现技术两种常用技术手段

1.Iframe 2.qinakun js库

接下来开始实现技术

4.创建两个项目应用不同技术点 Vue ，React并且创建两个脚手架

5.打开qiankun官网

快速上手 - qiankun

给Vue 以及React脚手架都安装yarn add qiankun包

6.主应用Vue配置

7.配置微应用React

1.根目录下载 yarn add react-app-rewired 配置webpack 官网也有写

2.配置webpack 新建这个文件夹配置

const { name } = require('./package');module.exports = {webpack: (config) => {config.output.library = `${name}-[name]`;config.output.libraryTarget = 'umd';// config.output.jsonpFunction = `webpackJsonp_${name}`;config.output.globalObject = 'window';return config;},devServer: (_) => {const config = _;config.headers = {'Access-Control-Allow-Origin': '*',};config.historyApiFallback = true;config.hot = false;config.watchContentBase = false;config.liveReload = false;return config;},
};

3.配置public-path.js文件

4.配置index.js接入路由

5.改变启动配置修改webpack

实践：

访问刚刚配置的路由则访问成功！

微前端框架qiankun开发到部署保姆式教程原理与实战相关推荐

微前端框架qiankun项目实战（一）--本地开发篇
❝ 作者:黑化程序员 https://juejin.cn/post/6970310177517993998 ❞ 大家好,我是小黑. 公司使用技术栈是vue,最近遇到了一个需求,要把原有后台管理系统的功 ...
深入浅出解析阿里成熟的微前端框架 qiankun 源码【图文并茂】
来源:leaf(a1029563229 ) https://github.com/a1029563229/blogs/blob/master/Source-Code/qiankun/1.md 本文将针 ...
深入浅出解析阿里成熟的微前端框架 qiankun 源码
本文将针对微前端框架 qiankun 的源码进行深入解析,在源码讲解之前,我们先来了解一下什么是微前端. 微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的 ...
万字长文+图文并茂+全面解析微前端框架 qiankun 源码 - qiankun 篇
写在开头微前端系列文章: 基于 qiankun 的微前端最佳实践(万字长文) - 从 0 到 1 篇基于 qiankun 的微前端最佳实践(图文并茂) - 应用间通信篇基于 qiankun 的微 ...
微前端框架qiankun之原理与实战
目录一.微前端概述 1. 基本原理 2. 微前端的主要优势 3. 当前微前端方案的一些缺点二.qiankun与single-spa实现原理 1. single-spa实现原理 (1). 路由问题 ...
iframe 接班人-微前端框架 qiankun 在中后台系统实践
「福利」 ✿✿ ヽ(°▽°)ノ ✿:文章最后有抽奖,转转纪念 T 恤,走过路过不要错过哦背景在转转的中台业务中,交易流转.业务运营和商户赋能等功能,主要集中在两个系统中(暂且命名为 inner/o ...
用微前端框架qiankun配置项目的实战
参考文档: qiankun官方文档 csdn文档1 csdn文档2 github地址 umi-qiankun 的教程请移步 umi 官网和 umi-qiankun 的官方 demo ...
微前端在得物客服域的实践/那么多微前端框架，为啥我们选Qiankun + MF
一.业务背景当前客服一站式工作台包含在线服务.电话.工单和工具类四大功能,页面的基本结构如下: 每个业务模块相对独立,各有独立的业务体系,单个模块体积较大,项目整体采用SPA + iframe的架构 ...
目标是最完善的微前端解决方案 - qiankun 2.0
距 qiankun 开源已过去了 11 个月,距上次官方发声已过去 8 个月. Announcing qiankun@2.0 2019 年 6 月,微前端框架 qiankun 正式发布了 1. ...

微前端框架qiankun开发到部署保姆式教程原理与实战