Starting from
Language finches document

scenario

During the development of the sub-application, it is necessary to switch menus frequently, but because the sub-application is packaged and connected to the base, there cannot be menus, etc. However, if so, the daily development will be inconvenient, and even affect the development efficiency.

But my intuition, it seems, is that the right thing to do is to develop and debug the child application directly into the base,

Therefore, under the current scenario, what we need is: in the development environment, we want to have a menu, which is convenient for our developers to enter and switch routes; In a production environment, we want no menus;

So we can manipulate the packaging.

Specific operation

Can take into account this kind of scene generally, certainly also is to use umi to have a period of time, therefore the introduction that operates this piece won’t detail to fool type teaching.

1. Set up umi scaffolding

Since we use umi + QIANKUN to implement the micro front end, please first build umi scaffold, the specific operation please follow the document.

https://umijs.org/zh-CN/docs/getting-started# scaffolding

The.umirc.local.ts local configuration will only work in the local development environment, so it fits the scenario we want

https://umijs.org/zh-CN/docs/config# Local temporary configuration

Use the existing @umijs/plugin-layout dependency to configure the navigation menu

https://umijs.org/zh-CN/plugins/plugin-layout# extension routing configuration

I write this article based on memory, if there is something wrong or missing steps, please remind me, I will revise in time, thank you.

Github

https://github.com/blueju/my-ideal-umi-subapp-boilerplate

Reference:

  1. https://umijs.org/zh-CN/docs/config# Local temporary configuration
  2. https://umijs.org/zh-CN/plugins/plugin-layout
  3. https://umijs.org/zh-CN/plugins/plugin-layout# extension routing configuration