连接管道
18.46MB · 2025-09-14
点赞 + 收藏 === 学会???
在传统单体前端架构中，随着业务复杂度增加，代码臃肿、协作困难、部署效率低等问题愈发突出。微前端通过将项目拆分为多个独立自治的微应用，解决了这些问题：
本文将以电商后台管理系统为应用场景，对比分析无界（Momentum）与乾坤（Qiankun）两大框架的实现方式，通过完整示例代码揭示其核心差异。
假设某电商后台包含以下三个核心模块：
主应用提供统一导航和登录态，各子应用独立开发部署。
vue create main-appcd main-appnpm install momentum-ui # 无界框架npm install qiankun # 乾坤框架
main-app/├── public/│ └── index.html├── src/│ ├── components/│ │ └── NavBar.vue│ ├── App.vue│ ├── main.js│ └── ...├── package.json
src/main.js）import { createApp } from 'vue'import App from './App.vue'import NavBar from './components/NavBar.vue'import { registerMicroApps } from 'momentum-ui'const app = createApp(App)app.component('NavBar', NavBar)app.mount('#app')// 注册子应用registerMicroApps([ { name: 'product-react', entry: '//localhost:7100', activeRule: '/product', container: '#subapp-container' }, { name: 'order-vue', entry: '//localhost:7101', activeRule: '/order', container: '#subapp-container' }])src/components/NavBar.vue）<template> <nav> <router-link to="/product">商品管理</router-link> <router-link to="/order">订单处理</router-link> </nav></template>
public/index.html）<body> <div id="app"> <NavBar /> <div id="subapp-container"></div> </div></body>
src/main.js）import { createApp } from 'vue'import App from './App.vue'import NavBar from './components/NavBar.vue'import { registerMicroApps, start } from 'qiankun'const app = createApp(App)app.component('NavBar', NavBar)app.mount('#app')// 注册子应用registerMicroApps([ { name: 'product-react', entry: '//localhost:7100', activeRule: '/product', container: '#subapp-container', props: { allowRouter: true } }, { name: 'order-vue', entry: '//localhost:7101', activeRule: '/order', container: '#subapp-container' }])// 启动乾坤start()start() 激活沙箱环境sandbox: { strictStyleIsolation: true }npx create-react-app product-reactcd product-reactnpm install momentum-ui # 或 qiankun
// src/index.js (无界)import React from 'react'import ReactDOM from 'react-dom'import App from './App'if (window.__POWERED_BY_MOMENTUM__) { __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_MOMENTUM__}ReactDOM.render(<App />, document.getElementById('root'))// src/index.js (乾坤)import React from 'react'import ReactDOM from 'react-dom'import App from './App'let instance = nullfunction render(props) { ReactDOM.render(<App {...props} />, document.getElementById('root'))}if (!window.__POWERED_BY_QIANKUN__) { render()}export async function bootstrap() { console.log('React 子应用启动')}export async function mount(props) { console.log('React 子应用挂载') render(props)}export async function unmount() { ReactDOM.unmountComponentAtNode(instance.container.querySelector('#root')) console.log('React 子应用卸载')}sandbox: { strictStyleIsolation: true }），否则可能污染全局样式构建顺序：
Nginx 配置示例：
server { listen 80; location / { root /path/to/main-app/dist; try_files $uri $uri/ /index.html; } location /product/ { proxy_pass http://localhost:7100; } location /order/ { proxy_pass http://localhost:7101; }}Access-Control-Allow-Origin
通过本文的对比与实战演示，开发者可根据项目规模、技术复杂度、团队协作需求选择合适的微前端框架。建议从无界入手体验微前端优势，待业务扩展后再逐步迁移至乾坤。
