Vue2 多入口与微前端集成实战指南

一、多页面应用(MPA)配置

1. 多入口文件的差异化配置

在传统的单页面应用(SPA)中，我们通常只有一个 main.js 作为入口文件。但在多页面应用中，每个页面都需要独立的入口文件。

// 入口文件1: main-home.js
import Vue from 'vue'
import HomeApp from './HomeApp.vue'
import router from './router/home' // 独立的路由配置

new Vue({
  router,
  render: h => h(HomeApp)
}).$mount('#home-app')

// 入口文件2: main-admin.js
import Vue from 'vue'
import AdminApp from './AdminApp.vue'
import router from './router/admin' // 不同的路由配置

Vue.prototype.$adminApi = createAdminApi() // 仅Admin页面需要的API

new Vue({
  router,
  render: h => h(AdminApp)
}).$mount('#admin-app')

实践建议：

• 为每个入口创建独立的目录结构
• 使用环境变量区分不同入口的配置
• 考虑使用动态导入减少初始加载体积

2. 公共依赖提取策略

通过Webpack的splitChunks优化依赖管理：

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          name: 'commons',
          chunks: 'initial',
          minChunks: 2, // 被至少2个入口引用的模块
          minSize: 0
        },
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
}

优化效果对比：

实践建议：

• 监控打包分析报告，调整minChunks值
• 对大型库(如ElementUI)单独拆分
• 使用webpack-bundle-analyzer可视化分析

二、微前端兼容性处理

1. 全局变量隔离

微前端环境下，主子应用可能都使用Vue，需要避免全局变量冲突：

// 子应用入口文件
let vueInstance = null

function mount() {
  vueInstance = new Vue({
    render: h => h(App)
  }).$mount('#sub-app')
}

function unmount() {
  if (vueInstance) {
    vueInstance.$destroy()
    vueInstance.$el.innerHTML = ''
    vueInstance = null
  }
}

// 通过全局变量暴露生命周期
if (!window.singleSpaNavigate) {
  // 独立运行
  mount()
} else {
  // 作为微应用运行
  window.app1 = { mount, unmount }
}

关键点：

• 避免直接修改window.Vue
• 使用沙箱模式隔离全局状态
• 清理所有定时器和事件监听

2. 生命周期与通信

主子应用间的通信方案：

// 主应用初始化通信桥
class EventBridge {
  constructor() {
    this.events = {}
  }
  
  on(event, callback) {
    if (!this.events[event]) this.events[event] = []
    this.events[event].push(callback)
  }
  
  emit(event, payload) {
    (this.events[event] || []).forEach(cb => cb(payload))
  }
}

window.mainAppBridge = new EventBridge()

// 子应用中使用
export default {
  mounted() {
    window.mainAppBridge.on('user-change', user => {
      this.user = user
    })
  },
  beforeDestroy() {
    // 清理事件监听
  }
}

实践建议：

• 使用命名空间避免事件冲突
• 考虑使用CustomEvent实现更规范的事件通信
• 主子应用间尽量通过props传递数据

三、最佳实践总结

1. 多页面应用优化：

   • 按业务划分代码仓库
   • 共享组件通过npm私有包管理
   • 建立统一的构建流水线
2. 微前端实施要点：

3. 性能监控指标：

   • 首次加载时间(主应用)
   • 子应用切换延迟
   • 内存泄漏检测

常见问题解决方案：

• CSS冲突：使用scoped样式或CSS Modules
• 路由冲突：主子应用使用不同的base路径
• 版本不一致：锁定核心库版本或使用externals

通过合理的多入口配置和微前端集成，可以在保持开发体验的同时，实现应用的灵活组合和独立部署。