umi3 + qiankun 快速搭建微应用实践

2021-10-22 21:06:03 阅读：580 来源： 互联网

标签：umi3 yarn qiankun umijs 应用 umi pro 搭建

1、创建主应用mian-pro

1-1）umijs创建项目：

mkdir main-pro && cd ./main-pro && yarn create @umijs/umi-app

1-2）安装依赖和qiankun插件：

yarn
yarn add @umijs/plugin-qiankun -D

1-3）配置.umirc.ts

需要修改路由和配置qiankun为应用入口

  routes: [
    { path: '/', component: '@/pages/index' },
    {
      path: '/umi-pro',
      microApp: 'umi-pro',
    }
  ],
  qiankun: {
    master: {
      apps: [
        {
          name: 'umi-pro', // 微应用名
          entry: '//localhost:8888',
        }
      ]
    }
  }

如下图就是新增的（小灯泡不是）：
在这里插入图片描述
到此主应用配置完成。

1-4）启动主应用

yarn start

2、创建子应用umi-pro

2-1）在于主应用的同级下创建子应用umi-pro：

mkdir umi-pro && cd ./umi-pro && yarn create @umijs/umi-app

在这里插入图片描述

2-2）安装依赖和qiankun插件

yarn
yarn add @umijs/plugin-qiankun -D
yarn add cross-env -D

2-3）配置.umirc.ts和package.json

1、配置.umirc.ts

qiankun: {
  slave: {}
}

在这里插入图片描述
2、配置package.json
》配置name和启动端口。

2-4）运行项目

yarn start

3、效果展示

主应用：
在这里插入图片描述
子应用：

主应用中看子应用：

在localhost:8000/umi-pro可以访问到umi-pro项目的内容。

标签：umi3,yarn,qiankun,umijs,应用,umi,pro,搭建
来源： https://blog.csdn.net/weixin_43386443/article/details/120912499

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9