主子应用样式冲突模板

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 切换路由时调用
+    // ✅ 微前端环境：按照 micro-app 标准规范导出生命周期
-    window.mount = mount
+    // micro-app 通过 window['micro-app-'+appName] 查找 mount/unmount
-    window.unmount = 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()
 }

src/views/About.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="about">
     <h1>📖 关于页面</h1>
+    <h2>冲突吗</h2>
     <p>这是一个使用 Vite 搭建的 Vue2 项目。</p>
   </div>
 </template>