导读：300人团队如何用微前端拯救臃肿系统？从零搭建可扩展架构，解决主子应用通信、样式隔离、独立部署三大难题！

微前端核心三要素

1. 技术栈无关性

• 主应用Vue3 + 子应用React/Angular混用
• 框架版本自由升级（Vue2→Vue3平滑过渡）

2. 独立开发部署

graph LR
A[Git仓库独立] --> B[构建流程独立]
B --> C[版本发布独立]
C --> D[异常回滚独立]

3.运行时隔离

• JS沙箱（Proxy代理全局对象）
• CSS沙箱（Shadow DOM/Scoped CSS）

四步搭建基础架构

Step 1：创建Vue3主应用

npm create vue@latest main-app
cd main-app
npm install qiankun

Step 2：配置主应用容器

Step 3：注册子应用

// main.js
import { registerMicroApps, start } from 'qiankun'

registerMicroApps([
  {
    name: 'vue-sub',
    entry: '//localhost:7101',
    container: '#sub-container',
    activeRule: '/vue-sub',
    props: { token: 'main-app-token' }
  }
])

start()

Step 4：创建Vue子应用

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

function render(props) {
  instance = createApp(App)
  instance.mount(props.container || '#app')
}

export async function mount(props) {
  render(props)
}

export async function unmount() {
  instance.unmount()
}

三大常见问题解决方案

问题1：主子应用路由冲突

// 主应用路由配置
const routes = [
  { path: '/main/*', component: MainPage },
  { path: '/sub-app/*', component: SubAppContainer }
]

// 子应用使用hash路由
createWebHashHistory()

问题2：全局变量污染

// 沙箱配置
start({
  sandbox: {
    experimentalStyleIsolation: true // 开启样式隔离
  }
})

问题3：静态资源加载失败

// 子应用webpack配置
publicPath: process.env.NODE_ENV === 'production' 
  ? 'https://cdn.example.com/sub-app/' 
  : '//localhost:7101'

下一篇预告：《微前端进阶：跨技术栈融合与状态管理》