umi+@umijs/plugin-qiankun的应用

这段时间一直在看微前端方面的内容，调研了比较热门的框架qiankun，也看了很多大佬的帖子，文章等，根据这两天自己的Demo实践，记录下学习内容。

本文举例用的Demo是用的umi+@umijs/plugin-qiankun的组合，
项目结构是一个主应用mainSystem，两个子应用subSystemA，subSystemB。

项目都是用umi的脚手架生成的，比较简单基础：

yarn create umi

注意：demo用的版本如下，不同版本的umi会有一些比较大的差异，具体的可以看下umi官网

"umi": "^2.7.7","@umijs/plugin-qiankun": "^1.3.1"

注意：如果是刚开始接触的话，可以把项目放到根目录下先进行配置下，这里的话我是后面为了部署时尝试项目在非根目录下的情景来配的；xxxxx.com/h5/

主应用配置：

// mainSystem/.umirc.jsexport default {treeShaking: true,routes: [{path: '/',component: '../layouts/index',routes: [{ path: '/', component: '../pages/index' }, { path: '/subSystemA' }, { path: '/subSystemB' }]}],// base: 'h5/mainSystem',// publicPath: '//xxxxx.com/',base: '/h5/mainSystem', // 部署时非根目录需要配置路径前缀publicPath: '/h5/mainSystem/',outputPath: '../dist/mainSystem',plugins: [// ref: https://umijs.org/plugin/umi-plugin-react.html['umi-plugin-react',{antd: true,dva: true,dynamicImport: { webpackChunkName: true },title: 'mainSystem',dll: true,locale: {enable: true,default: 'en-US'},routes: {exclude: [/models\//, /services\//, /model\.(t|j)sx?$/, /service\.(t|j)sx?$/, /components\//]}}],['@umijs/plugin-qiankun',{master: {apps: [{name: 'subSystemA',// entry: '/h5/subSystemA',entry: '//localhost:8001/subSystemA',base: '/h5/mainSystem/subSystemA',path: '/mainSystem/subSystemA',mountElementId: 'root-slave',props: { loading: true }},{name: 'subSystemB',// entry: '/h5/subSystemB',entry: '//localhost:8002/subSystemB',base: '/h5/mainSystem/subSystemB',path: '/subSystemB',key: 'subSystemB',mountElementId: 'root-slave'}],jsSandbox: true,prefetch: true}}]]
};

子应用配置：

// subSystemA/.umirc.jsexport default {treeShaking: true,routes: [{path: '/',component: '../layouts/index',routes: [{ path: '/', component: '../pages/index' }]}],base: '/h5/mainSystem/subSystemA', // 部署时非根目录需要配置路径前缀runtimePublicPath: false,publicPath: '/h5/subSystemA/',outputPath: '../dist/subSystemA',mountElementId: 'subSystemA-root',plugins: [// ref: https://umijs.org/plugin/umi-plugin-react.html['umi-plugin-react',{antd: true,dva: true,dynamicImport: { webpackChunkName: true },title: 'subSystemA',dll: false,locale: {enable: true,default: 'en-US'},routes: {exclude: [/models\//, /services\//, /model\.(t|j)sx?$/, /service\.(t|j)sx?$/, /components\//]}}],['@umijs/plugin-qiankun/slave', {}]]
};

内容比较简单，，应为插件都给做好了，要做的是熟悉下api进行主应用，子应用的配置，简单demo版的就这样，后续还需要实际看下研究下
demo地址：
https://github.com/gaomeng965/SelfStudy.git

umi+@umijs/plugin-qiankun的应用相关推荐

轻松学 UmiJS 视频教程
轻松学 UmiJS 视频教程(35 个视频) 轻松学 UmiJS 视频教程 #1 介绍「04:03」轻松学 UmiJS 视频教程 #2 快速上手「04:49」轻松学 UmiJS 视频教程 #3 通 ...
umijs 隐藏开发工具_如何定制企业级前端研发框架？（基于 UmiJS）
前言当开发前端应用(PC.H5.SSR 等)时,会怎么做? 从头开始初始化,拷贝 webpack 配置.安装一堆 babel 插件.手写一系列 ESLint 规则等,这些流程下来仅仅只能将 Hell ...
生产可用：是时候来一个微前端架构了！
微前端的场景域在选择一个微前端方案之前,常常需要思考这样一个问题,我们为什么需要微前端.通常对微前端的诉求有两个方面,一是工程上的价值,二是产品上的价值. 对于工程上的价值,可以从一个三年陈的项目来 ...
蚂蚁金服花呗借呗招聘公告
?Hi,你现在看到的内容是一篇充满诚意的前端招聘公告.我们团队来自蚂蚁金服-微贷事业部,目前业务战略重大升级,急切需要大量前端人才加入,P6.P7.P8 不限!同时 P7 及以上有带团队机会. 我们 ...
vue -V 执行失败檔案名稱、目錄名稱或磁碟區標籤語法錯誤。
vue -V 执行失败提示 :檔案名稱.目錄名稱或磁碟區標籤語法錯誤. 安装 @Vue/cli 流程 yarn global add @vue/cli yarn global v1.22.10 [1 ...
微前端系列讲解--应用集成方案（qiankun+umi+vue）
1. 微前端项目架构及选型介绍 1.1. 微前端选型概述微前端架构是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用.考 ...
umi +qiankun 主应用动态装载子应用（路由）解决方案
umi +qiankun 主应用动态装载子应用(路由)解决方案前言接上一篇(https://www.yuque.com/blueju/blog/gtgndg),上一篇中使用的都是运行时动态注册子应 ...
基于umijs/plugin-qiankun 的微前端配置（vue+umi）
一,umijs/plugin-qiankun 特点 ✔︎ 基于 qiankun ✔︎ 支持主应用和子应用都用 umi ✔︎ 支持通过组件引入子应用 ✔︎ 父子应用通讯 ✔︎ 子应用运行时配置自定义 ...
yarn create @umijs/umi-app或者yarn create umi myapp 报错：文件名、目录名或卷标语法不正确。
1. Problem Description 在学习ant-design,使用 @umijs/umi-app 为模板,创建一个项目: 和ant-design-pro的时候,使用umi myapp 创建 ...

umi+@umijs/plugin-qiankun的应用

umi+@umijs/plugin-qiankun的应用相关推荐

最新文章

热门文章