From 7a08faff5d5f90e207b00eac426e1cc9f70e4698 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=AC=E6=B5=B7?= <445436867@qq.com>
Date: Tue, 29 Nov 2022 11:12:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20qiankun=E6=8F=92=E4=BB=B6=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81vite=20(#157)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: qiankun支持vite

* fix: 优化根据meta创建qiankun子路由逻辑

* refactor: 优化模板代码
---
 docs/reference/plugin/plugins/qiankun.md      |  22 +-
 .../fes-plugin-qiankun/examples/micro/.fes.js |  10 -
 .../examples/vite-main/.fes.js                |  63 ++++--
 .../examples/vite-main/package.json           |   4 +-
 .../examples/vite-main/src/app.jsx            |   2 +-
 .../examples/vite-main/src/pages/index.vue    |  36 ++--
 .../vite-main/src/pages/micro/index.vue       |   7 -
 .../vite-main/src/pages/micro/test.vue        |   7 -
 .../vite-main/src/pages/vite/index.vue        |   7 +
 .../vite-main/src/pages/vite/test.vue         |   7 +
 .../vite-main/src/pages/webpack/index.vue     |   7 +
 .../vite-main/src/pages/webpack/test.vue      |   7 +
 .../examples/{micro => vite-micro}/.env       |   0
 .../examples/vite-micro/index.html            |  17 ++
 .../examples/vite-micro/package.json          |  51 +++++
 .../src/app.js => vite-micro/src/app.jsx}     |   8 +-
 .../src/components/PageLoading.vue            |   0
 .../examples/vite-micro/src/global.css        |   3 +
 .../{micro => vite-micro}/src/images/icon.png | Bin
 .../src/pages/vite}/index.vue                 |   5 +-
 .../src/pages/vite}/test.vue                  |   5 +-
 .../{micro => vite-micro}/tsconfig.json       |   0
 .../examples/webpack-main/.env                |   2 +-
 .../examples/webpack-main/.fes.js             |  62 ++++--
 .../examples/webpack-main/package.json        |   2 +-
 .../examples/webpack-main/src/pages/index.vue |  35 ++--
 .../webpack-main/src/pages/micro/index.vue    |   7 -
 .../webpack-main/src/pages/micro/test.vue     |   7 -
 .../webpack-main/src/pages/vite/index.vue     |   7 +
 .../webpack-main/src/pages/vite/test.vue      |   7 +
 .../webpack-main/src/pages/webpack/index.vue  |   7 +
 .../webpack-main/src/pages/webpack/test.vue   |   7 +
 .../examples/webpack-micro/.env               |   1 +
 .../{micro => webpack-micro}/package.json     |   2 +-
 .../examples/webpack-micro/src/app.js         |  31 +++
 .../src/components/PageLoading.vue            |  29 +++
 .../{micro => webpack-micro}/src/global.css   |   0
 .../webpack-micro/src/images/icon.png         | Bin 0 -> 5586 bytes
 .../webpack-micro/src/pages/webpack/index.vue |  18 ++
 .../webpack-micro/src/pages/webpack/test.vue  |  18 ++
 .../examples/webpack-micro/tsconfig.json      |  37 ++++
 packages/fes-plugin-qiankun/package.json      |   6 +-
 packages/fes-plugin-qiankun/src/main/index.js |   8 -
 .../src/main/modifyRoutes.js                  |  67 +++---
 .../main/runtime/MicroAppRouteComponent.tpl   |  11 +
 .../runtime/getMicroAppRouteComponent.jsx     |   6 -
 .../fes-plugin-qiankun/src/micro/index.js     | 192 +++++++++++-------
 .../runtime/{lifecycles.tpl => lifecycle.tpl} |   0
 .../src/micro/runtime/runtime.tpl             |   2 +-
 yarn.lock                                     | 102 +++++++++-
 50 files changed, 667 insertions(+), 274 deletions(-)
 delete mode 100644 packages/fes-plugin-qiankun/examples/micro/.fes.js
 delete mode 100644 packages/fes-plugin-qiankun/examples/vite-main/src/pages/micro/index.vue
 delete mode 100644 packages/fes-plugin-qiankun/examples/vite-main/src/pages/micro/test.vue
 create mode 100644 packages/fes-plugin-qiankun/examples/vite-main/src/pages/vite/index.vue
 create mode 100644 packages/fes-plugin-qiankun/examples/vite-main/src/pages/vite/test.vue
 create mode 100644 packages/fes-plugin-qiankun/examples/vite-main/src/pages/webpack/index.vue
 create mode 100644 packages/fes-plugin-qiankun/examples/vite-main/src/pages/webpack/test.vue
 rename packages/fes-plugin-qiankun/examples/{micro => vite-micro}/.env (100%)
 create mode 100644 packages/fes-plugin-qiankun/examples/vite-micro/index.html
 create mode 100644 packages/fes-plugin-qiankun/examples/vite-micro/package.json
 rename packages/fes-plugin-qiankun/examples/{micro/src/app.js => vite-micro/src/app.jsx} (73%)
 rename packages/fes-plugin-qiankun/examples/{micro => vite-micro}/src/components/PageLoading.vue (100%)
 create mode 100644 packages/fes-plugin-qiankun/examples/vite-micro/src/global.css
 rename packages/fes-plugin-qiankun/examples/{micro => vite-micro}/src/images/icon.png (100%)
 rename packages/fes-plugin-qiankun/examples/{micro/src/pages/micro => vite-micro/src/pages/vite}/index.vue (72%)
 rename packages/fes-plugin-qiankun/examples/{micro/src/pages/micro => vite-micro/src/pages/vite}/test.vue (72%)
 rename packages/fes-plugin-qiankun/examples/{micro => vite-micro}/tsconfig.json (100%)
 delete mode 100644 packages/fes-plugin-qiankun/examples/webpack-main/src/pages/micro/index.vue
 delete mode 100644 packages/fes-plugin-qiankun/examples/webpack-main/src/pages/micro/test.vue
 create mode 100644 packages/fes-plugin-qiankun/examples/webpack-main/src/pages/vite/index.vue
 create mode 100644 packages/fes-plugin-qiankun/examples/webpack-main/src/pages/vite/test.vue
 create mode 100644 packages/fes-plugin-qiankun/examples/webpack-main/src/pages/webpack/index.vue
 create mode 100644 packages/fes-plugin-qiankun/examples/webpack-main/src/pages/webpack/test.vue
 create mode 100644 packages/fes-plugin-qiankun/examples/webpack-micro/.env
 rename packages/fes-plugin-qiankun/examples/{micro => webpack-micro}/package.json (97%)
 create mode 100644 packages/fes-plugin-qiankun/examples/webpack-micro/src/app.js
 create mode 100644 packages/fes-plugin-qiankun/examples/webpack-micro/src/components/PageLoading.vue
 rename packages/fes-plugin-qiankun/examples/{micro => webpack-micro}/src/global.css (100%)
 create mode 100644 packages/fes-plugin-qiankun/examples/webpack-micro/src/images/icon.png
 create mode 100644 packages/fes-plugin-qiankun/examples/webpack-micro/src/pages/webpack/index.vue
 create mode 100644 packages/fes-plugin-qiankun/examples/webpack-micro/src/pages/webpack/test.vue
 create mode 100644 packages/fes-plugin-qiankun/examples/webpack-micro/tsconfig.json
 create mode 100644 packages/fes-plugin-qiankun/src/main/runtime/MicroAppRouteComponent.tpl
 delete mode 100644 packages/fes-plugin-qiankun/src/main/runtime/getMicroAppRouteComponent.jsx
 rename packages/fes-plugin-qiankun/src/micro/runtime/{lifecycles.tpl => lifecycle.tpl} (100%)

diff --git a/docs/reference/plugin/plugins/qiankun.md b/docs/reference/plugin/plugins/qiankun.md
index 06c98428..57a373f0 100644
--- a/docs/reference/plugin/plugins/qiankun.md
+++ b/docs/reference/plugin/plugins/qiankun.md
@@ -42,6 +42,11 @@ export default {
 };
 ```
 
+当使用 `vite` 构建时需注意，**name** 必须跟子应用 `package.json`的 `name`保持一致。
+
+
+
+
 ### 第二步：装载子应用
 
 #### 使用路由绑定的方式
@@ -72,7 +77,7 @@ export default {
 }
 ```
 我们现在想在 `/son` 加载子应用 `app1`，只需要增加这样一些配置即可：
-```js {16-23}
+```js {16-21}
 export default {
     router: {
         routes: [{
@@ -92,8 +97,6 @@ export default {
                     "path": "/son",
                     "meta": {
                         "name": "son",
-                        "title": "子应用",
-                        "microApp": "app1"
                     }
                 }
             ]
@@ -101,7 +104,7 @@ export default {
     }
 }
 ```
-当前我们依然提倡约定路由的方式，在`src/pages` 目录新建 `son.vue`：
+在`src/pages` 目录新建 `son.vue`：
 ```vue
 <config>
 {
@@ -172,6 +175,17 @@ export default {
 };
 ```
 
+如果使用 `vite` 构建，当执行 `dev` 时需要额外配置：
+```js
+export default {
+    qiankun: {
+        micro: {
+            useDevMode: true
+        },
+    }
+};
+```
+
 ### 第二步：配置运行时生命周期钩子（可选）
 插件会自动为你创建好 `qiankun` 子应用需要的生命周期钩子，但是如果你想在生命周期期间加一些自定义逻辑，可以在子应用的 `src/app.js` 里导出 `qiankun` 对象，并实现每一个生命周期钩子，其中钩子函数的入参 `props` 由主应用自动注入。
 ```js
diff --git a/packages/fes-plugin-qiankun/examples/micro/.fes.js b/packages/fes-plugin-qiankun/examples/micro/.fes.js
deleted file mode 100644
index 42588498..00000000
--- a/packages/fes-plugin-qiankun/examples/micro/.fes.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// .fes.js 只负责管理编译时配置，只能使用plain Object
-export default {
-    qiankun: {
-        micro: {}
-    },
-    plugins: [
-        require.resolve('../../../fes-plugin-model/lib'),
-        require.resolve('../../../fes-plugin-qiankun/lib'),
-    ]
-};
diff --git a/packages/fes-plugin-qiankun/examples/vite-main/.fes.js b/packages/fes-plugin-qiankun/examples/vite-main/.fes.js
index 9789c5c2..57b40844 100644
--- a/packages/fes-plugin-qiankun/examples/vite-main/.fes.js
+++ b/packages/fes-plugin-qiankun/examples/vite-main/.fes.js
@@ -1,38 +1,59 @@
 // .fes.js 只负责管理编译时配置，只能使用plain Object
 
-
 export default {
     access: {
         roles: {
-            admin: ["*"]
-        }
+            admin: ['*'],
+        },
     },
     layout: {
-        title: "Fes.js",
+        title: 'vite 主应用',
         footer: 'Created by MumbleFE',
         multiTabs: false,
         navigation: 'mixin',
-        menus: [{
-            name: 'index',
-        }, {
-            title: "子应用",
-            children: [{
-                name: 'micro-index'
-            },{
-                name: 'micro-test'
-            }]
-        }]
+        menus: [
+            {
+                name: 'index',
+            },
+            {
+                title: 'webpack子应用',
+                children: [
+                    {
+                        name: 'webpack-micro-index',
+                    },
+                    {
+                        name: 'webpack-micro-test',
+                    },
+                ],
+            },
+            {
+                title: 'vite子应用',
+                children: [
+                    {
+                        name: 'vite-micro-index',
+                    },
+                    {
+                        name: 'vite-micro-test',
+                    },
+                ],
+            },
+        ],
     },
     qiankun: {
         main: {
             apps: [
                 {
-                    name: 'micro', // 唯一 id
+                    name: 'webpack-micro', // 唯一 id
+                    entry: '//localhost:9001', // html entry
+                    props: {}, // 传递给子应用的数据
+                },
+                {
+                    name: 'vite-micro', // 唯一 id
                     entry: '//localhost:8001', // html entry
-                    props: {}  // 传递给子应用的数据
-                }
-            ]
-        }
+                    props: {}, // 传递给子应用的数据
+                },
+            ],
+        },
     },
     plugins: [
         require.resolve('../../../fes-plugin-model/lib'),
@@ -40,7 +61,5 @@ export default {
         require.resolve('../../../fes-plugin-access/lib'),
         require.resolve('../../../fes-plugin-qiankun/lib'),
     ],
-    presets: [
-        require.resolve('../../../fes-builder-vite/lib'),
-    ]
+    presets: [require.resolve('../../../fes-builder-vite/lib')],
 };
diff --git a/packages/fes-plugin-qiankun/examples/vite-main/package.json b/packages/fes-plugin-qiankun/examples/vite-main/package.json
index 74e3c661..aa5f906c 100644
--- a/packages/fes-plugin-qiankun/examples/vite-main/package.json
+++ b/packages/fes-plugin-qiankun/examples/vite-main/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "main",
+    "name": "vite-main",
     "version": "2.0.0",
     "description": "fes项目模版",
     "scripts": {
@@ -43,8 +43,8 @@
         "access": "public"
     },
     "dependencies": {
-        "@fesjs/fes": "^2.0.0",
         "vue": "^3.2.37",
+        "@fesjs/fes": "^2.0.0",
         "@fesjs/fes-design": "^0.7.0"
     },
     "private": true
diff --git a/packages/fes-plugin-qiankun/examples/vite-main/src/app.jsx b/packages/fes-plugin-qiankun/examples/vite-main/src/app.jsx
index a942f014..f1f82077 100644
--- a/packages/fes-plugin-qiankun/examples/vite-main/src/app.jsx
+++ b/packages/fes-plugin-qiankun/examples/vite-main/src/app.jsx
@@ -9,7 +9,7 @@ export const beforeRender = {
             setTimeout(() => {
                 setRole('admin');
                 resolve();
-            }, 1000);
+            }, 100);
         });
     },
 };
diff --git a/packages/fes-plugin-qiankun/examples/vite-main/src/pages/index.vue b/packages/fes-plugin-qiankun/examples/vite-main/src/pages/index.vue
index 60251284..5fd847bb 100644
--- a/packages/fes-plugin-qiankun/examples/vite-main/src/pages/index.vue
+++ b/packages/fes-plugin-qiankun/examples/vite-main/src/pages/index.vue
@@ -1,17 +1,18 @@
 <template>
-    <div>
-        main
-        <input />
-        <FTabs v-model="activeKey">
-            <FTabPane name="Tab 1" value="1">
-                <MicroAppWithMemoHistory key="1" name="micro" url="/micro" />
-            </FTabPane>
-            <FTabPane name="Tab 2" value="2">
-                <MicroAppWithMemoHistory key="2" name="micro" url="/micro/test" />
-            </FTabPane>
-            <FTabPane name="Tab 3" value="3"> Content of Tab Pane 3 </FTabPane>
-        </FTabs>
-    </div>
+    <FTabs v-model="activeKey">
+        <FTabPane name="webpack子应用首页" value="1">
+            <MicroAppWithMemoHistory key="1" name="webpack-micro" url="/webpack" />
+        </FTabPane>
+        <FTabPane name="webpack子应用测试页" value="2">
+            <MicroAppWithMemoHistory key="2" name="webpack-micro" url="/webpack/test" />
+        </FTabPane>
+        <FTabPane name="vite子应用首页" value="3">
+            <MicroAppWithMemoHistory key="3" name="vite-micro" url="/vite" />
+        </FTabPane>
+        <FTabPane name="vite子应用测试页" value="4">
+            <MicroAppWithMemoHistory key="4" name="vite-micro" url="/vite/test" />
+        </FTabPane>
+    </FTabs>
 </template>
 <config>
 {
@@ -20,22 +21,15 @@
 }
 </config>
 <script>
-import { ref, onMounted } from 'vue';
+import { ref } from 'vue';
 import { MicroAppWithMemoHistory } from '@fesjs/fes';
 import { FTabPane, FTabs } from '@fesjs/fes-design';
 
 export default {
     components: { FTabs, FTabPane, MicroAppWithMemoHistory },
     setup() {
-        const url = ref('/micro/test');
-        onMounted(() => {
-            setTimeout(() => {
-                url.value = '/micro';
-            }, 3000);
-        });
         return {
             activeKey: ref('1'),
-            url,
         };
     },
 };
diff --git a/packages/fes-plugin-qiankun/examples/vite-main/src/pages/micro/index.vue b/packages/fes-plugin-qiankun/examples/vite-main/src/pages/micro/index.vue
deleted file mode 100644
index 13661b70..00000000
--- a/packages/fes-plugin-qiankun/examples/vite-main/src/pages/micro/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<config>
-{
-    "name": "micro-index",
-    "title": "子应用1-首页",
-    "microApp": "micro"
-}
-</config>
diff --git a/packages/fes-plugin-qiankun/examples/vite-main/src/pages/micro/test.vue b/packages/fes-plugin-qiankun/examples/vite-main/src/pages/micro/test.vue
deleted file mode 100644
index d77b3272..00000000
--- a/packages/fes-plugin-qiankun/examples/vite-main/src/pages/micro/test.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<config>
-{
-    "name": "micro-test",
-    "title": "子应用1-测试",
-    "microApp": "micro"
-}
-</config>
diff --git a/packages/fes-plugin-qiankun/examples/vite-main/src/pages/vite/index.vue b/packages/fes-plugin-qiankun/examples/vite-main/src/pages/vite/index.vue
new file mode 100644
index 00000000..464d07a0
--- /dev/null
+++ b/packages/fes-plugin-qiankun/examples/vite-main/src/pages/vite/index.vue
@@ -0,0 +1,7 @@
+<config>
+{
+    "name": "vite-micro-index",
+    "title": "vite子应用-首页",
+    "microApp": "vite-micro"
+}
+</config>
diff --git a/packages/fes-plugin-qiankun/examples/vite-main/src/pages/vite/test.vue b/packages/fes-plugin-qiankun/examples/vite-main/src/pages/vite/test.vue
new file mode 100644
index 00000000..9a92cc08
--- /dev/null
+++ b/packages/fes-plugin-qiankun/examples/vite-main/src/pages/vite/test.vue
@@ -0,0 +1,7 @@
+<config>
+{
+    "name": "vite-micro-test",
+    "title": "vite子应用-测试",
+    "microApp": "vite-micro"
+}
+</config>
diff --git a/packages/fes-plugin-qiankun/examples/vite-main/src/pages/webpack/index.vue b/packages/fes-plugin-qiankun/examples/vite-main/src/pages/webpack/index.vue
new file mode 100644
index 00000000..b6a4dae2
--- /dev/null
+++ b/packages/fes-plugin-qiankun/examples/vite-main/src/pages/webpack/index.vue
@@ -0,0 +1,7 @@
+<config>
+{
+    "name": "webpack-micro-index",
+    "title": "webpack子应用-首页",
+    "microApp": "webpack-micro"
+}
+</config>
diff --git a/packages/fes-plugin-qiankun/examples/vite-main/src/pages/webpack/test.vue b/packages/fes-plugin-qiankun/examples/vite-main/src/pages/webpack/test.vue
new file mode 100644
index 00000000..e81603c2
--- /dev/null
+++ b/packages/fes-plugin-qiankun/examples/vite-main/src/pages/webpack/test.vue
@@ -0,0 +1,7 @@
+<config>
+{
+    "name": "webpack-micro-test",
+    "title": "webpack子应用-测试",
+    "microApp": "webpack-micro"
+}
+</config>
diff --git a/packages/fes-plugin-qiankun/examples/micro/.env b/packages/fes-plugin-qiankun/examples/vite-micro/.env
similarity index 100%
rename from packages/fes-plugin-qiankun/examples/micro/.env
rename to packages/fes-plugin-qiankun/examples/vite-micro/.env
diff --git a/packages/fes-plugin-qiankun/examples/vite-micro/index.html b/packages/fes-plugin-qiankun/examples/vite-micro/index.html
new file mode 100644
index 00000000..34868378
--- /dev/null
+++ b/packages/fes-plugin-qiankun/examples/vite-micro/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>
+        <%= title %>
+    </title>
+    <link rel="shortcut icon" type="image/x-icon" href="./logo.png">
+</head>
+
+<body>
+    <div id="<%= mountElementId %>"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/packages/fes-plugin-qiankun/examples/vite-micro/package.json b/packages/fes-plugin-qiankun/examples/vite-micro/package.json
new file mode 100644
index 00000000..d028aea6
--- /dev/null
+++ b/packages/fes-plugin-qiankun/examples/vite-micro/package.json
@@ -0,0 +1,51 @@
+{
+    "name": "vite-micro",
+    "version": "2.0.0",
+    "description": "fes项目模版",
+    "scripts": {
+        "build": "fes build",
+        "prod": "FES_ENV=prod fes build",
+        "analyze": "ANALYZE=1 fes build",
+        "dev": "fes dev",
+        "test": "fes test"
+    },
+    "keywords": [
+        "管理端",
+        "fes",
+        "fast",
+        "easy",
+        "strong"
+    ],
+    "files": [
+        ".eslintrc.js",
+        ".gitignore",
+        ".fes.js",
+        ".fes.prod.js",
+        "mock.js",
+        "package.json",
+        "README.md",
+        "tsconfig.json",
+        "/src",
+        "/config"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "directory": "packages/fes-template"
+    },
+    "author": "harrywan",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
+    },
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@fesjs/fes": "^2.0.0",
+        "vue": "^3.2.37",
+        "@fesjs/fes-design": "^0.7.0"
+    },
+    "private": true
+}
\ No newline at end of file
diff --git a/packages/fes-plugin-qiankun/examples/micro/src/app.js b/packages/fes-plugin-qiankun/examples/vite-micro/src/app.jsx
similarity index 73%
rename from packages/fes-plugin-qiankun/examples/micro/src/app.js
rename to packages/fes-plugin-qiankun/examples/vite-micro/src/app.jsx
index 7ccef9a4..dff0c39a 100644
--- a/packages/fes-plugin-qiankun/examples/micro/src/app.js
+++ b/packages/fes-plugin-qiankun/examples/vite-micro/src/app.jsx
@@ -14,18 +14,18 @@ export const beforeRender = {
 export const qiankun = {
     // 应用加载之前
     async bootstrap(props) {
-        console.log('micro bootstrap', props);
+        console.log('vite micro bootstrap', props);
     },
     // 应用 render 之前触发
     async mount(props) {
-        console.log('micro mount', props);
+        console.log('vite micro mount', props);
     },
     // 当 props 更新时触发
     async update(props) {
-        console.log('micro update', props);
+        console.log('vite micro update', props);
     },
     // 应用卸载之后触发
     async unmount(props) {
-        console.log('micro unmount', props);
+        console.log('vite micro unmount', props);
     },
 };
diff --git a/packages/fes-plugin-qiankun/examples/micro/src/components/PageLoading.vue b/packages/fes-plugin-qiankun/examples/vite-micro/src/components/PageLoading.vue
similarity index 100%
rename from packages/fes-plugin-qiankun/examples/micro/src/components/PageLoading.vue
rename to packages/fes-plugin-qiankun/examples/vite-micro/src/components/PageLoading.vue
diff --git a/packages/fes-plugin-qiankun/examples/vite-micro/src/global.css b/packages/fes-plugin-qiankun/examples/vite-micro/src/global.css
new file mode 100644
index 00000000..b8e98c28
--- /dev/null
+++ b/packages/fes-plugin-qiankun/examples/vite-micro/src/global.css
@@ -0,0 +1,3 @@
+html, body {
+    margin: 0;
+}
\ No newline at end of file
diff --git a/packages/fes-plugin-qiankun/examples/micro/src/images/icon.png b/packages/fes-plugin-qiankun/examples/vite-micro/src/images/icon.png
similarity index 100%
rename from packages/fes-plugin-qiankun/examples/micro/src/images/icon.png
rename to packages/fes-plugin-qiankun/examples/vite-micro/src/images/icon.png
diff --git a/packages/fes-plugin-qiankun/examples/micro/src/pages/micro/index.vue b/packages/fes-plugin-qiankun/examples/vite-micro/src/pages/vite/index.vue
similarity index 72%
rename from packages/fes-plugin-qiankun/examples/micro/src/pages/micro/index.vue
rename to packages/fes-plugin-qiankun/examples/vite-micro/src/pages/vite/index.vue
index 6fd529b8..c93d429f 100644
--- a/packages/fes-plugin-qiankun/examples/micro/src/pages/micro/index.vue
+++ b/packages/fes-plugin-qiankun/examples/vite-micro/src/pages/vite/index.vue
@@ -1,6 +1,5 @@
 <template>
-    <div class="haizekuo">micro - index</div>
-    <input />
+    <div>vite - micro - index</div>
 </template>
 <config>
 {
@@ -17,5 +16,3 @@ export default {
     },
 };
 </script>
-
-<style scoped></style>
diff --git a/packages/fes-plugin-qiankun/examples/micro/src/pages/micro/test.vue b/packages/fes-plugin-qiankun/examples/vite-micro/src/pages/vite/test.vue
similarity index 72%
rename from packages/fes-plugin-qiankun/examples/micro/src/pages/micro/test.vue
rename to packages/fes-plugin-qiankun/examples/vite-micro/src/pages/vite/test.vue
index 33504e20..caac05fb 100644
--- a/packages/fes-plugin-qiankun/examples/micro/src/pages/micro/test.vue
+++ b/packages/fes-plugin-qiankun/examples/vite-micro/src/pages/vite/test.vue
@@ -1,6 +1,5 @@
 <template>
-    <div class="haizekuo">micro - test</div>
-    <input />
+    <div>vite - micro - test</div>
 </template>
 <config>
 {
@@ -17,5 +16,3 @@ export default {
     },
 };
 </script>
-
-<style scoped></style>
diff --git a/packages/fes-plugin-qiankun/examples/micro/tsconfig.json b/packages/fes-plugin-qiankun/examples/vite-micro/tsconfig.json
similarity index 100%
rename from packages/fes-plugin-qiankun/examples/micro/tsconfig.json
rename to packages/fes-plugin-qiankun/examples/vite-micro/tsconfig.json
diff --git a/packages/fes-plugin-qiankun/examples/webpack-main/.env b/packages/fes-plugin-qiankun/examples/webpack-main/.env
index 25241b73..00ee76b1 100644
--- a/packages/fes-plugin-qiankun/examples/webpack-main/.env
+++ b/packages/fes-plugin-qiankun/examples/webpack-main/.env
@@ -1 +1 @@
-PORT=8080
+PORT=9000
diff --git a/packages/fes-plugin-qiankun/examples/webpack-main/.fes.js b/packages/fes-plugin-qiankun/examples/webpack-main/.fes.js
index e7fc5d91..ed94237f 100644
--- a/packages/fes-plugin-qiankun/examples/webpack-main/.fes.js
+++ b/packages/fes-plugin-qiankun/examples/webpack-main/.fes.js
@@ -2,35 +2,57 @@
 export default {
     access: {
         roles: {
-            admin: ["*"]
-        }
+            admin: ['*'],
+        },
     },
     layout: {
-        title: "Fes.js",
+        title: 'webpack 主应用',
         footer: 'Created by MumbleFE',
         multiTabs: false,
         navigation: 'mixin',
-        menus: [{
-            name: 'index',
-        }, {
-            title: "子应用1",
-            children: [{
-                name: 'micro-index'
-            },{
-                name: 'micro-test'
-            }]
-        }]
+        menus: [
+            {
+                name: 'index',
+            },
+            {
+                title: 'webpack子应用',
+                children: [
+                    {
+                        name: 'webpack-micro-index',
+                    },
+                    {
+                        name: 'webpack-micro-test',
+                    },
+                ],
+            },
+            {
+                title: 'vite子应用',
+                children: [
+                    {
+                        name: 'vite-micro-index',
+                    },
+                    {
+                        name: 'vite-micro-test',
+                    },
+                ],
+            },
+        ],
     },
     qiankun: {
         main: {
             apps: [
                 {
-                    name: 'micro', // 唯一 id
+                    name: 'webpack-micro', // 唯一 id
+                    entry: '//localhost:9001', // html entry
+                    props: {}, // 传递给子应用的数据
+                },
+                {
+                    name: 'vite-micro', // 唯一 id
                     entry: '//localhost:8001', // html entry
-                    props: {}  // 传递给子应用的数据
-                }
-            ]
-        }
+                    props: {}, // 传递给子应用的数据
+                },
+            ],
+        },
     },
     plugins: [
         require.resolve('../../../fes-plugin-model/lib'),
@@ -38,7 +60,5 @@ export default {
         require.resolve('../../../fes-plugin-access/lib'),
         require.resolve('../../../fes-plugin-qiankun/lib'),
     ],
-    presets: [
-        require.resolve('../../../fes-builder-webpack/lib'),
-    ]
+    presets: [require.resolve('../../../fes-builder-webpack/lib')],
 };
diff --git a/packages/fes-plugin-qiankun/examples/webpack-main/package.json b/packages/fes-plugin-qiankun/examples/webpack-main/package.json
index 74e3c661..1eea9b20 100644
--- a/packages/fes-plugin-qiankun/examples/webpack-main/package.json
+++ b/packages/fes-plugin-qiankun/examples/webpack-main/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "main",
+    "name": "webpack-main",
     "version": "2.0.0",
     "description": "fes项目模版",
     "scripts": {
diff --git a/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/index.vue b/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/index.vue
index d7c6f581..5fd847bb 100644
--- a/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/index.vue
+++ b/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/index.vue
@@ -1,16 +1,18 @@
 <template>
-    <div>
-        main
-        <FTabs v-model="activeKey">
-            <FTabPane name="Tab 1" value="1">
-                <MicroAppWithMemoHistory key="1" name="micro" url="/micro" />
-            </FTabPane>
-            <FTabPane name="Tab 2" value="2">
-                <MicroAppWithMemoHistory key="2" name="micro" url="/micro/test" />
-            </FTabPane>
-            <FTabPane name="Tab 3" value="3"> Content of Tab Pane 3 </FTabPane>
-        </FTabs>
-    </div>
+    <FTabs v-model="activeKey">
+        <FTabPane name="webpack子应用首页" value="1">
+            <MicroAppWithMemoHistory key="1" name="webpack-micro" url="/webpack" />
+        </FTabPane>
+        <FTabPane name="webpack子应用测试页" value="2">
+            <MicroAppWithMemoHistory key="2" name="webpack-micro" url="/webpack/test" />
+        </FTabPane>
+        <FTabPane name="vite子应用首页" value="3">
+            <MicroAppWithMemoHistory key="3" name="vite-micro" url="/vite" />
+        </FTabPane>
+        <FTabPane name="vite子应用测试页" value="4">
+            <MicroAppWithMemoHistory key="4" name="vite-micro" url="/vite/test" />
+        </FTabPane>
+    </FTabs>
 </template>
 <config>
 {
@@ -19,22 +21,15 @@
 }
 </config>
 <script>
-import { ref, onMounted } from 'vue';
+import { ref } from 'vue';
 import { MicroAppWithMemoHistory } from '@fesjs/fes';
 import { FTabPane, FTabs } from '@fesjs/fes-design';
 
 export default {
     components: { FTabs, FTabPane, MicroAppWithMemoHistory },
     setup() {
-        const url = ref('/micro/test');
-        onMounted(() => {
-            setTimeout(() => {
-                url.value = '/micro';
-            }, 3000);
-        });
         return {
             activeKey: ref('1'),
-            url,
         };
     },
 };
diff --git a/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/micro/index.vue b/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/micro/index.vue
deleted file mode 100644
index 13661b70..00000000
--- a/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/micro/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<config>
-{
-    "name": "micro-index",
-    "title": "子应用1-首页",
-    "microApp": "micro"
-}
-</config>
diff --git a/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/micro/test.vue b/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/micro/test.vue
deleted file mode 100644
index d77b3272..00000000
--- a/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/micro/test.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<config>
-{
-    "name": "micro-test",
-    "title": "子应用1-测试",
-    "microApp": "micro"
-}
-</config>
diff --git a/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/vite/index.vue b/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/vite/index.vue
new file mode 100644
index 00000000..464d07a0
--- /dev/null
+++ b/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/vite/index.vue
@@ -0,0 +1,7 @@
+<config>
+{
+    "name": "vite-micro-index",
+    "title": "vite子应用-首页",
+    "microApp": "vite-micro"
+}
+</config>
diff --git a/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/vite/test.vue b/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/vite/test.vue
new file mode 100644
index 00000000..9a92cc08
--- /dev/null
+++ b/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/vite/test.vue
@@ -0,0 +1,7 @@
+<config>
+{
+    "name": "vite-micro-test",
+    "title": "vite子应用-测试",
+    "microApp": "vite-micro"
+}
+</config>
diff --git a/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/webpack/index.vue b/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/webpack/index.vue
new file mode 100644
index 00000000..b6a4dae2
--- /dev/null
+++ b/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/webpack/index.vue
@@ -0,0 +1,7 @@
+<config>
+{
+    "name": "webpack-micro-index",
+    "title": "webpack子应用-首页",
+    "microApp": "webpack-micro"
+}
+</config>
diff --git a/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/webpack/test.vue b/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/webpack/test.vue
new file mode 100644
index 00000000..e81603c2
--- /dev/null
+++ b/packages/fes-plugin-qiankun/examples/webpack-main/src/pages/webpack/test.vue
@@ -0,0 +1,7 @@
+<config>
+{
+    "name": "webpack-micro-test",
+    "title": "webpack子应用-测试",
+    "microApp": "webpack-micro"
+}
+</config>
diff --git a/packages/fes-plugin-qiankun/examples/webpack-micro/.env b/packages/fes-plugin-qiankun/examples/webpack-micro/.env
new file mode 100644
index 00000000..d6a3c558
--- /dev/null
+++ b/packages/fes-plugin-qiankun/examples/webpack-micro/.env
@@ -0,0 +1 @@
+PORT=9001
diff --git a/packages/fes-plugin-qiankun/examples/micro/package.json b/packages/fes-plugin-qiankun/examples/webpack-micro/package.json
similarity index 97%
rename from packages/fes-plugin-qiankun/examples/micro/package.json
rename to packages/fes-plugin-qiankun/examples/webpack-micro/package.json
index 6e3c5d5e..1649116e 100644
--- a/packages/fes-plugin-qiankun/examples/micro/package.json
+++ b/packages/fes-plugin-qiankun/examples/webpack-micro/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "micro",
+    "name": "webpack-micro",
     "version": "2.0.0",
     "description": "fes项目模版",
     "scripts": {
diff --git a/packages/fes-plugin-qiankun/examples/webpack-micro/src/app.js b/packages/fes-plugin-qiankun/examples/webpack-micro/src/app.js
new file mode 100644
index 00000000..ae30f501
--- /dev/null
+++ b/packages/fes-plugin-qiankun/examples/webpack-micro/src/app.js
@@ -0,0 +1,31 @@
+import PageLoading from '@/components/PageLoading.vue';
+
+export const beforeRender = {
+    loading: <PageLoading />,
+    action() {
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve();
+            }, 200);
+        });
+    },
+};
+
+export const qiankun = {
+    // 应用加载之前
+    async bootstrap(props) {
+        console.log('webpack micro bootstrap', props);
+    },
+    // 应用 render 之前触发
+    async mount(props) {
+        console.log('webpack micro mount', props);
+    },
+    // 当 props 更新时触发
+    async update(props) {
+        console.log('webpack micro update', props);
+    },
+    // 应用卸载之后触发
+    async unmount(props) {
+        console.log('webpack micro unmount', props);
+    },
+};
diff --git a/packages/fes-plugin-qiankun/examples/webpack-micro/src/components/PageLoading.vue b/packages/fes-plugin-qiankun/examples/webpack-micro/src/components/PageLoading.vue
new file mode 100644
index 00000000..3d5c1cf1
--- /dev/null
+++ b/packages/fes-plugin-qiankun/examples/webpack-micro/src/components/PageLoading.vue
@@ -0,0 +1,29 @@
+<template>
+    <div class="page-loading">
+        <f-spin size="large" stroke="#5384ff" />
+    </div>
+</template>
+<script>
+import { FSpin } from '@fesjs/fes-design';
+
+export default {
+    components: {
+        FSpin,
+    },
+    setup() {
+        return {};
+    },
+};
+</script>
+<style>
+.page-loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+</style>
diff --git a/packages/fes-plugin-qiankun/examples/micro/src/global.css b/packages/fes-plugin-qiankun/examples/webpack-micro/src/global.css
similarity index 100%
rename from packages/fes-plugin-qiankun/examples/micro/src/global.css
rename to packages/fes-plugin-qiankun/examples/webpack-micro/src/global.css
diff --git a/packages/fes-plugin-qiankun/examples/webpack-micro/src/images/icon.png b/packages/fes-plugin-qiankun/examples/webpack-micro/src/images/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ff46a842d654da25a975ac545798bbcc4fd57918
GIT binary patch
literal 5586
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

literal 0
HcmV?d00001

diff --git a/packages/fes-plugin-qiankun/examples/webpack-micro/src/pages/webpack/index.vue b/packages/fes-plugin-qiankun/examples/webpack-micro/src/pages/webpack/index.vue
new file mode 100644
index 00000000..bce5f24a
--- /dev/null
+++ b/packages/fes-plugin-qiankun/examples/webpack-micro/src/pages/webpack/index.vue
@@ -0,0 +1,18 @@
+<template>
+    <div>webpack - micro - index</div>
+</template>
+<config>
+{
+    "name": "index",
+    "title": "home"
+}
+</config>
+<script>
+export default {
+    setup() {
+        return {
+            bigData: new Array(5 * 1024 * 1024),
+        };
+    },
+};
+</script>
diff --git a/packages/fes-plugin-qiankun/examples/webpack-micro/src/pages/webpack/test.vue b/packages/fes-plugin-qiankun/examples/webpack-micro/src/pages/webpack/test.vue
new file mode 100644
index 00000000..bf79569b
--- /dev/null
+++ b/packages/fes-plugin-qiankun/examples/webpack-micro/src/pages/webpack/test.vue
@@ -0,0 +1,18 @@
+<template>
+    <div>webpack - micro - test</div>
+</template>
+<config>
+{
+    "name": "test",
+    "title": "test"
+}
+</config>
+<script>
+export default {
+    setup() {
+        return {
+            bigData: new Array(5 * 1024 * 1024),
+        };
+    },
+};
+</script>
diff --git a/packages/fes-plugin-qiankun/examples/webpack-micro/tsconfig.json b/packages/fes-plugin-qiankun/examples/webpack-micro/tsconfig.json
new file mode 100644
index 00000000..ea930c0b
--- /dev/null
+++ b/packages/fes-plugin-qiankun/examples/webpack-micro/tsconfig.json
@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "esnext",
+    "lib": ["esnext", "dom"],
+    "sourceMap": true,
+    "baseUrl": ".",
+    "jsx": "preserve",
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "experimentalDecorators": true,
+    "strict": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@@/*": ["./src/.fes/*"]
+    }
+  },
+  "include": [
+    "src/**/*",
+    "tests/**/*",
+    "test/**/*",
+    "__test__/**/*",
+    "typings/**/*",
+    "config/**/*",
+    ".eslintrc.js",
+    ".stylelintrc.js",
+    ".prettierrc.js"
+  ],
+  "exclude": ["node_modules", "build", "dist", "scripts", "src/.fes/*", "webpack", "jest"]
+}
diff --git a/packages/fes-plugin-qiankun/package.json b/packages/fes-plugin-qiankun/package.json
index e3572aa5..c3464487 100644
--- a/packages/fes-plugin-qiankun/package.json
+++ b/packages/fes-plugin-qiankun/package.json
@@ -10,8 +10,9 @@
   "scripts": {
     "start": "npm-run-all --parallel start:*",
     "start:vite-main": "cd ./examples/vite-main && fes dev",
+    "start:vite-micro": "cd ./examples/vite-micro && fes dev",
     "start:webpack-main": "cd ./examples/webpack-main && fes dev",
-    "start:micro": "cd ./examples/micro && fes dev"
+    "start:webpack-micro": "cd ./examples/webpack-micro && fes dev"
   },
   "repository": {
     "type": "git",
@@ -34,7 +35,8 @@
     "@fesjs/utils": "3.0.0-rc.2",
     "address": "^1.1.2",
     "lodash-es": "^4.17.15",
-    "qiankun": "^2.7.0"
+    "qiankun": "^2.7.0",
+    "vite-plugin-qiankun": "^1.0.15"
   },
   "devDependencies": {
     "npm-run-all": "^4.1.5"
diff --git a/packages/fes-plugin-qiankun/src/main/index.js b/packages/fes-plugin-qiankun/src/main/index.js
index b741733e..74b4b6be 100644
--- a/packages/fes-plugin-qiankun/src/main/index.js
+++ b/packages/fes-plugin-qiankun/src/main/index.js
@@ -30,7 +30,6 @@ export default function (api) {
     const absMicroAppWithMemoHistoryPath = join(namespace, 'MicroAppWithMemoHistory.jsx');
     const absRuntimePath = join(namespace, 'runtime.js');
     const absMasterOptionsPath = join(namespace, 'masterOptions.js');
-    const absGetMicroAppRouteCompPath = join(namespace, 'getMicroAppRouteComponent.jsx');
 
     api.onGenerateFiles(() => {
         const HAS_PLUGIN_MODEL = api.hasPlugins(['@fesjs/plugin-model']);
@@ -85,11 +84,4 @@ export default function (api) {
             source: absMicroAppWithMemoHistoryPath,
         },
     ]);
-
-    api.addPluginExports(() => [
-        {
-            specifiers: ['getMicroAppRouteComponent'],
-            source: absGetMicroAppRouteCompPath,
-        },
-    ]);
 }
diff --git a/packages/fes-plugin-qiankun/src/main/modifyRoutes.js b/packages/fes-plugin-qiankun/src/main/modifyRoutes.js
index 9435fde2..6aee94fc 100644
--- a/packages/fes-plugin-qiankun/src/main/modifyRoutes.js
+++ b/packages/fes-plugin-qiankun/src/main/modifyRoutes.js
@@ -1,44 +1,36 @@
+import { join } from 'path';
+import { readFileSync } from 'fs';
 import { defaultHistoryType } from '../constants';
 
-function getMicroApp(options) {
-    const { key, microAppName, cacheName, masterHistoryType, base, namespace, ...normalizedRouteProps } = options;
-    return `(async () => {
-const { getMicroAppRouteComponent } = await import('@@/${namespace}/getMicroAppRouteComponent');
-return getMicroAppRouteComponent({key: '${key}', appName: '${microAppName}', cacheName: '${cacheName}', base: '${base}', masterHistoryType: '${masterHistoryType}', routeProps: ${JSON.stringify(
-        normalizedRouteProps,
-    )} })
-})()`;
-}
+let index = 0;
 
-function modifyRoutesWithAttachMode({ routes, masterHistoryType, base, namespace }) {
-    const patchRoutes = (_routes) => {
-        if (_routes.length) {
-            _routes.forEach((route) => {
-                if (route.meta && route.meta.microApp) {
-                    route.component = getMicroApp({
-                        key: route.path,
-                        cacheName: route.meta.cacheName ?? route.path,
-                        microAppName: route.meta.microApp,
-                        masterHistoryType,
-                        base,
-                        namespace,
-                    });
-                }
-                if (route.children?.length) {
-                    modifyRoutesWithAttachMode({
-                        routes: route.children,
-                        masterHistoryType,
-                        base,
-                        namespace,
-                    });
-                }
+function modifyRoutesWithAttachMode({ routes, api, namespace, masterHistoryType, base }) {
+    if (!routes.length) return;
+    routes.forEach((route) => {
+        if (route.meta && route.meta.microApp) {
+            const fileName = `MicroAppRouteComponent${index++}.vue`;
+            route.component = `@@/${namespace}/${fileName}`;
+            api.writeTmpFile({
+                path: join(namespace, fileName),
+                content: api.utils.Mustache.render(readFileSync(join(__dirname, 'runtime/MicroAppRouteComponent.tpl'), 'utf-8'), {
+                    cacheName: route.meta.cacheName ?? route.path,
+                    microAppName: route.meta.microApp,
+                    masterHistoryType,
+                    base,
+                    namespace,
+                }),
             });
         }
-    };
-
-    patchRoutes(routes);
-
-    return routes;
+        if (route.children?.length) {
+            modifyRoutesWithAttachMode({
+                routes: route.children,
+                api,
+                namespace,
+                masterHistoryType,
+                base,
+            });
+        }
+    });
 }
 
 export default function modifyRoutes({ api, namespace }) {
@@ -47,10 +39,11 @@ export default function modifyRoutes({ api, namespace }) {
         const masterHistoryType = (router && router.mode) || defaultHistoryType;
 
         modifyRoutesWithAttachMode({
+            api,
+            namespace,
             routes,
             masterHistoryType,
             base: base || '/',
-            namespace,
         });
 
         return routes;
diff --git a/packages/fes-plugin-qiankun/src/main/runtime/MicroAppRouteComponent.tpl b/packages/fes-plugin-qiankun/src/main/runtime/MicroAppRouteComponent.tpl
new file mode 100644
index 00000000..6449e698
--- /dev/null
+++ b/packages/fes-plugin-qiankun/src/main/runtime/MicroAppRouteComponent.tpl
@@ -0,0 +1,11 @@
+<template>
+    <MicroApp name="{{{microAppName}}}" base="{{{base}}}" masterHistoryType="{{{masterHistoryType}}}" cacheName="{{{cacheName}}}"> </MicroApp>
+</template>
+<script>
+// eslint-disable-next-line import/extensions
+import { MicroApp } from './MicroApp';
+
+export default {
+    components: { MicroApp },
+};
+</script>
diff --git a/packages/fes-plugin-qiankun/src/main/runtime/getMicroAppRouteComponent.jsx b/packages/fes-plugin-qiankun/src/main/runtime/getMicroAppRouteComponent.jsx
deleted file mode 100644
index bbdc78cc..00000000
--- a/packages/fes-plugin-qiankun/src/main/runtime/getMicroAppRouteComponent.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-// eslint-disable-next-line import/extensions
-import { MicroApp } from './MicroApp';
-
-export function getMicroAppRouteComponent({ key, appName, base, masterHistoryType, routeProps, cacheName }) {
-    return <MicroApp key={key} base={base} masterHistoryType={masterHistoryType} name={appName} cacheName={cacheName} {...routeProps} />;
-}
diff --git a/packages/fes-plugin-qiankun/src/micro/index.js b/packages/fes-plugin-qiankun/src/micro/index.js
index 5bf16a4c..d8463032 100644
--- a/packages/fes-plugin-qiankun/src/micro/index.js
+++ b/packages/fes-plugin-qiankun/src/micro/index.js
@@ -1,7 +1,8 @@
 import assert from 'assert';
-import { lodash } from '@fesjs/utils';
 import { readFileSync } from 'fs';
 import { join } from 'path';
+import { lodash } from '@fesjs/utils';
+import vitePluginQiankun from 'vite-plugin-qiankun';
 import { qiankunStateFromMainModelNamespace } from '../constants';
 
 const namespace = 'plugin-qiankun/micro';
@@ -19,70 +20,131 @@ export default function (api) {
         enableBy: () => isSlaveEnable(api),
     });
 
-    if (api.builder.name === 'vite') {
-        // 处理
-    } else {
-        api.modifyDefaultConfig((memo) => {
-            const initialMicroOptions = {
-                devSourceMap: true,
-                ...JSON.parse(process.env.INITIAL_QIANKUN_MIRCO_OPTIONS || '{}'),
-                ...(memo.qiankun || {}).micro,
-            };
-            const modifiedDefaultConfig = {
-                ...memo,
-                qiankun: {
-                    ...memo.qiankun,
-                    slave: initialMicroOptions,
-                },
-            };
+    api.modifyDefaultConfig((memo) => {
+        const initialMicroOptions = {
+            devSourceMap: true,
+            ...JSON.parse(process.env.INITIAL_QIANKUN_MICRO_OPTIONS || '{}'),
+            ...(memo.qiankun || {}).micro,
+        };
+        const modifiedDefaultConfig = {
+            ...memo,
+            qiankun: {
+                ...memo.qiankun,
+                micro: initialMicroOptions,
+            },
+        };
 
-            const shouldNotModifyDefaultBase = api.userConfig.qiankun?.slave?.shouldNotModifyDefaultBase ?? initialMicroOptions.shouldNotModifyDefaultBase;
-            if (!shouldNotModifyDefaultBase) {
-                modifiedDefaultConfig.router.base = `/${api.pkg.name}`;
+        const shouldNotModifyDefaultBase = api.userConfig.qiankun?.micro?.shouldNotModifyDefaultBase ?? initialMicroOptions.shouldNotModifyDefaultBase;
+        if (!shouldNotModifyDefaultBase) {
+            modifiedDefaultConfig.router.base = `/${api.pkg.name}`;
+        }
+
+        return modifiedDefaultConfig;
+    });
+
+    const absRuntimePath = join(namespace, 'runtime.js');
+    const absLifecyclePath = join(namespace, 'lifecycle.js');
+    const absMicroOptionsPath = join(namespace, 'slaveOptions.js');
+    const absModelPath = join(namespace, 'qiankunModel.js');
+
+    api.register({
+        key: 'addExtraModels',
+        fn: () => {
+            if (api.hasPlugins(['@fesjs/plugin-model'])) {
+                return [
+                    {
+                        absPath: `@@/${absModelPath}`,
+                        namespace: qiankunStateFromMainModelNamespace,
+                    },
+                ];
             }
+            return [];
+        },
+    });
 
-            return modifiedDefaultConfig;
+    api.onGenerateFiles(() => {
+        const HAS_PLUGIN_MODEL = api.hasPlugins(['@fesjs/plugin-model']);
+
+        api.writeTmpFile({
+            path: absRuntimePath,
+            content: readFileSync(join(__dirname, 'runtime/runtime.tpl'), 'utf-8'),
         });
 
-        const absRuntimePath = join(namespace, 'runtime.js');
-        const absLifecyclesPath = join(namespace, 'lifecycles.js');
-        const absMicroOptionsPath = join(namespace, 'slaveOptions.js');
+        api.writeTmpFile({
+            path: absLifecyclePath,
+            content: Mustache.render(readFileSync(join(__dirname, 'runtime/lifecycle.tpl'), 'utf-8'), {
+                HAS_PLUGIN_MODEL,
+            }),
+        });
+
+        api.writeTmpFile({
+            path: absMicroOptionsPath,
+            content: `
+            let options = ${JSON.stringify((api.config.qiankun || {}).micro || {})};
+            export const getSlaveOptions = () => options;
+            export const setSlaveOptions = (newOpts) => options = ({ ...options, ...newOpts });
+            `,
+        });
+
+        if (HAS_PLUGIN_MODEL) {
+            api.writeTmpFile({
+                path: absModelPath,
+                content: readFileSync(join(__dirname, 'runtime/qiankunModel.tpl'), 'utf-8'),
+            });
+        }
+    });
+
+    api.addRuntimePlugin(() => `@@/${absRuntimePath}`);
+
+    if (api.builder.name === 'vite') {
+        // 处理
+        api.modifyBundleConfig((memo) => {
+            assert(api.pkg.name, 'You should have name in package.json');
+            memo.plugins.push(
+                vitePluginQiankun(api.pkg.name, {
+                    useDevMode: api.config.qiankun?.micro?.useDevMode,
+                }),
+            );
+            return memo;
+        });
+
+        api.addEntryImports(() => ({
+            source: `vite-plugin-qiankun/dist/helper`,
+            specifier: '{ renderWithQiankun, qiankunWindow }',
+        }));
+
+        api.addEntryImports(() => ({
+            source: `@@/${absLifecyclePath}`,
+            specifier:
+                '{ genBootstrap as qiankun_genBootstrap, genMount as qiankun_genMount, genUnmount as qiankun_genUnmount, genUpdate as qiankun_genUpdate  }',
+        }));
+
+        api.addEntryCode(
+            () => `
+    const bootstrap = qiankun_genBootstrap(clientRender, app);
+    const mount = qiankun_genMount('#${api.config.mountElementId}');
+    const unmount = qiankun_genUnmount();
+    const update = qiankun_genUpdate();
+
+    renderWithQiankun({
+        bootstrap,
+        mount,
+        update,
+        unmount,
+    })
+    
+    if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
+        bootstrap().then(mount);
+    }
+    `,
+        );
+    } else {
         const absPublicPath = join(namespace, 'publicPath.js');
-        const absModelPath = join(namespace, 'qiankunModel.js');
 
         // 更改public path
         api.addEntryImportsAhead(() => [{ source: `@@/${absPublicPath}` }]);
 
-        api.register({
-            key: 'addExtraModels',
-            fn: () => {
-                if (api.hasPlugins(['@fesjs/plugin-model'])) {
-                    return [
-                        {
-                            absPath: `@@/${absModelPath}`,
-                            namespace: qiankunStateFromMainModelNamespace,
-                        },
-                    ];
-                }
-                return [];
-            },
-        });
-
         api.onGenerateFiles(() => {
-            const HAS_PLUGIN_MODEL = api.hasPlugins(['@fesjs/plugin-model']);
-
-            api.writeTmpFile({
-                path: absRuntimePath,
-                content: readFileSync(join(__dirname, 'runtime/runtime.tpl'), 'utf-8'),
-            });
-
-            api.writeTmpFile({
-                path: absLifecyclesPath,
-                content: Mustache.render(readFileSync(join(__dirname, 'runtime/lifecycles.tpl'), 'utf-8'), {
-                    HAS_PLUGIN_MODEL,
-                }),
-            });
-
             api.writeTmpFile({
                 path: absPublicPath,
                 content: `
@@ -92,26 +154,8 @@ export default function (api) {
                 }
                 `,
             });
-
-            api.writeTmpFile({
-                path: absMicroOptionsPath,
-                content: `
-                let options = ${JSON.stringify((api.config.qiankun || {}).micro || {})};
-                export const getSlaveOptions = () => options;
-                export const setSlaveOptions = (newOpts) => options = ({ ...options, ...newOpts });
-                `,
-            });
-
-            if (HAS_PLUGIN_MODEL) {
-                api.writeTmpFile({
-                    path: absModelPath,
-                    content: readFileSync(join(__dirname, 'runtime/qiankunModel.tpl'), 'utf-8'),
-                });
-            }
         });
 
-        api.addRuntimePlugin(() => `@@/${absRuntimePath}`);
-
         api.chainWebpack((config) => {
             assert(api.pkg.name, 'You should have name in package.json');
             config.output.libraryTarget('umd').library(`${api.pkg.name}-[name]`);
@@ -119,9 +163,9 @@ export default function (api) {
         });
 
         api.addEntryImports(() => ({
-            source: `@@/${absLifecyclesPath}`,
+            source: `@@/${absLifecyclePath}`,
             specifier:
-                '{ genMount as qiankun_genMount, genBootstrap as qiankun_genBootstrap, genUnmount as qiankun_genUnmount, genUpdate as qiankun_genUpdate  }',
+                '{ genBootstrap as qiankun_genBootstrap, genMount as qiankun_genMount, genUnmount as qiankun_genUnmount, genUpdate as qiankun_genUpdate  }',
         }));
 
         api.addEntryCode(
diff --git a/packages/fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl b/packages/fes-plugin-qiankun/src/micro/runtime/lifecycle.tpl
similarity index 100%
rename from packages/fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl
rename to packages/fes-plugin-qiankun/src/micro/runtime/lifecycle.tpl
diff --git a/packages/fes-plugin-qiankun/src/micro/runtime/runtime.tpl b/packages/fes-plugin-qiankun/src/micro/runtime/runtime.tpl
index 2d620c2c..34a4b5a4 100644
--- a/packages/fes-plugin-qiankun/src/micro/runtime/runtime.tpl
+++ b/packages/fes-plugin-qiankun/src/micro/runtime/runtime.tpl
@@ -1,5 +1,5 @@
 import { createMemoryHistory } from '@@/core/coreExports';
-import qiankunRender, { clientRenderOptsStack, history as historyConfig } from './lifecycles';
+import qiankunRender, { clientRenderOptsStack, history as historyConfig } from './lifecycle';
 
 
 export const render = oldRender => qiankunRender().then(oldRender);
diff --git a/yarn.lock b/yarn.lock
index 76cdc7a7..ee0a3b99 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3788,6 +3788,31 @@ chardet@^0.7.0:
   resolved "https://registry.npmmirror.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+cheerio-select@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/cheerio-select/-/cheerio-select-2.1.0.tgz#4d8673286b8126ca2a8e42740d5e3c4884ae21b4"
+  integrity sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==
+  dependencies:
+    boolbase "^1.0.0"
+    css-select "^5.1.0"
+    css-what "^6.1.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.0.1"
+
+cheerio@^1.0.0-rc.10:
+  version "1.0.0-rc.12"
+  resolved "https://registry.npmmirror.com/cheerio/-/cheerio-1.0.0-rc.12.tgz#788bf7466506b1c6bf5fae51d24a2c4d62e47683"
+  integrity sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==
+  dependencies:
+    cheerio-select "^2.1.0"
+    dom-serializer "^2.0.0"
+    domhandler "^5.0.3"
+    domutils "^3.0.1"
+    htmlparser2 "^8.0.1"
+    parse5 "^7.0.0"
+    parse5-htmlparser2-tree-adapter "^7.0.0"
+
 "chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.2, chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
@@ -4419,6 +4444,17 @@ css-select@^4.1.3, css-select@^4.2.1:
     domutils "^2.8.0"
     nth-check "^2.0.1"
 
+css-select@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.npmmirror.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
+  integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^6.1.0"
+    domhandler "^5.0.2"
+    domutils "^3.0.1"
+    nth-check "^2.0.1"
+
 css-tree@^1.1.2, css-tree@^1.1.3:
   version "1.1.3"
   resolved "https://registry.npmmirror.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
@@ -4427,7 +4463,7 @@ css-tree@^1.1.2, css-tree@^1.1.3:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
-css-what@^6.0.1:
+css-what@^6.0.1, css-what@^6.1.0:
   version "6.1.0"
   resolved "https://registry.npmmirror.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
   integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
@@ -4765,7 +4801,16 @@ dom-serializer@^1.0.1:
     domhandler "^4.2.0"
     entities "^2.0.0"
 
-domelementtype@^2.0.1, domelementtype@^2.2.0:
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
+domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
   integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
@@ -4784,6 +4829,13 @@ domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.2.2, domhandler@^4.3.1:
   dependencies:
     domelementtype "^2.2.0"
 
+domhandler@^5.0.1, domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.npmmirror.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
 domutils@^2.5.2, domutils@^2.8.0:
   version "2.8.0"
   resolved "https://registry.npmmirror.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
@@ -4793,6 +4845,15 @@ domutils@^2.5.2, domutils@^2.8.0:
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
 
+domutils@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/domutils/-/domutils-3.0.1.tgz#696b3875238338cb186b6c0612bd4901c89a4f1c"
+  integrity sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.1"
+
 dot-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmmirror.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
@@ -4905,6 +4966,11 @@ entities@^3.0.1, entities@~3.0.1:
   resolved "https://registry.npmmirror.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
   integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
 
+entities@^4.2.0, entities@^4.3.0, entities@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.npmmirror.com/entities/-/entities-4.4.0.tgz#97bdaba170339446495e653cfd2db78962900174"
+  integrity sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==
+
 envinfo@^7.7.3, envinfo@^7.8.1:
   version "7.8.1"
   resolved "https://registry.npmmirror.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
@@ -6253,6 +6319,16 @@ htmlparser2@^7.1.2:
     domutils "^2.8.0"
     entities "^3.0.1"
 
+htmlparser2@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-8.0.1.tgz#abaa985474fcefe269bc761a779b544d7196d010"
+  integrity sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    domutils "^3.0.1"
+    entities "^4.3.0"
+
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.npmmirror.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
@@ -8473,6 +8549,14 @@ parse5-htmlparser2-tree-adapter@^6.0.0:
   dependencies:
     parse5 "^6.0.1"
 
+parse5-htmlparser2-tree-adapter@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmmirror.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz#23c2cc233bcf09bb7beba8b8a69d46b08c62c2f1"
+  integrity sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==
+  dependencies:
+    domhandler "^5.0.2"
+    parse5 "^7.0.0"
+
 parse5@6.0.1, parse5@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmmirror.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
@@ -8483,6 +8567,13 @@ parse5@^5.1.1:
   resolved "https://registry.npmmirror.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
   integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
 
+parse5@^7.0.0:
+  version "7.1.2"
+  resolved "https://registry.npmmirror.com/parse5/-/parse5-7.1.2.tgz#0736bebbfd77793823240a23b7fc5e010b7f8e32"
+  integrity sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==
+  dependencies:
+    entities "^4.4.0"
+
 parseurl@~1.3.2, parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.npmmirror.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -10747,6 +10838,13 @@ vite-plugin-monaco-editor@^1.0.10:
   resolved "https://registry.npmmirror.com/vite-plugin-monaco-editor/-/vite-plugin-monaco-editor-1.1.0.tgz#a6238c2e13d5e98dd54a1bc51f6f189325219de3"
   integrity sha512-IvtUqZotrRoVqwT0PBBDIZPNraya3BxN/bfcNfnxZ5rkJiGcNtO5eAOWWSgT7zullIAEqQwxMU83yL9J5k7gww==
 
+vite-plugin-qiankun@^1.0.15:
+  version "1.0.15"
+  resolved "https://registry.npmmirror.com/vite-plugin-qiankun/-/vite-plugin-qiankun-1.0.15.tgz#862bb6935c50db31536cf322e13f3bf59e1adace"
+  integrity sha512-0QB0Wr8Eu/LGcuJAfuNXDb7BAFDszo3GCxq4bzgXdSFAlK425u1/UGMxaDEBVA1uPFrLsZPzig83Ufdfl6J45A==
+  dependencies:
+    cheerio "^1.0.0-rc.10"
+
 vite-plugin-windicss@^1.8.3:
   version "1.8.8"
   resolved "https://registry.npmmirror.com/vite-plugin-windicss/-/vite-plugin-windicss-1.8.8.tgz#ff1adf7d1a1c38634c77a4c0125fa730d16138e7"