From 65aa7feae824f26030a107160460254b7e8abdf6 Mon Sep 17 00:00:00 2001
From: cirry <812852553@qq.com>
Date: Sun, 21 Jun 2026 16:31:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E5=AD=90=E5=BA=94=E7=94=A8=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=86=B2=E7=AA=81=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.js         | 41 +++++++++++++++++++++++++++++++----------
 src/views/About.vue |  1 +
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/main.js b/src/main.js
index 6f77958..ee11bca 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,36 +6,57 @@ let app = null
 
 /**
  * 挂载 Vue 实例
- * 微前端环境下由主应用通过 window.mount() 调用
- * 独立运行时直接调用
+ * - 微前端环境：由主应用通过 window['micro-app-xxx'].mount() 调用
+ * - 独立运行：直接调用
  */
 function mount() {
-    if (app) return // 防止重复挂载
+    // 防止重复挂载（keepAlive 恢复时可能重复触发）
+    if (app) {
+        console.warn('[my-vue2-app] 已经挂载，跳过重复 mount')
+        return
+    }
+
     app = new Vue({
         router,
         render: h => h(App)
     }).$mount('#app')
+
+    console.log('[my-vue2-app] 子应用已挂载')
 }
 
 /**
  * 卸载 Vue 实例
- * 微前端 keepAlive 切换时由主应用通过 window.unmount() 调用
+ * - 微前端环境：主应用 keepAlive 切换路由时调用
  */
 function unmount() {
     if (app) {
         app.$destroy()
+        // 清理 DOM 残留（Vue 2 的 $destroy 不会自动清 DOM）
+        const root = document.getElementById('app')
+        if (root) {
+            root.innerHTML = ''
+        }
         app = null
     }
+    console.log('[my-vue2-app] 子应用已卸载')
 }
 
-// 判断是否运行在 micro-app 沙箱中
+// ============================================================
+// 环境判断：微前端环境 vs 独立运行
+// ============================================================
+
 if (window.__MICRO_APP_ENVIRONMENT__) {
-    // 注册生命周期钩子，供主应用 keepAlive 切换路由时调用
-    window.mount = mount
-    window.unmount = unmount
-    // 首次加载时主动挂载
+    // ✅ 微前端环境：按照 micro-app 标准规范导出生命周期
+    // micro-app 通过 window['micro-app-'+appName] 查找 mount/unmount
+    const appName = window.__MICRO_APP_NAME__
+    window[`micro-app-${appName}`] = { mount, unmount }
+
+    console.log(`[my-vue2-app] 检测到微前端环境，应用名称: ${appName}`)
+
+    // 首次加载时主动挂载（非 keepAlive 场景）
     mount()
 } else {
-    // 独立运行模式（如本地开发直接访问 http://localhost:5173）
+    // ✅ 独立运行模式（直接访问 http://localhost:5173）
+    console.log('[my-vue2-app] 独立运行模式')
     mount()
 }
\ No newline at end of file
diff --git a/src/views/About.vue b/src/views/About.vue
index 69579ca..63a5267 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="about">
     <h1>📖 关于页面</h1>
+    <h2>冲突吗</h2>
     <p>这是一个使用 Vite 搭建的 Vue2 项目。</p>
   </div>
 </template>
\ No newline at end of file