vue微前端实现
vue微前端实现方案
微前端架构允许将多个独立的前端应用组合成一个整体。以下是Vue实现微前端的几种常见方法：
使用Module Federation
Webpack 5的Module Federation特性是实现微前端的现代方案：
// host应用配置
new ModuleFederationPlugin({
name: 'host',
remotes: {
app1: 'app1@http://localhost:3001/remoteEntry.js'
}
})
// remote应用配置
new ModuleFederationPlugin({
name: 'app1',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/components/Button.vue'
}
})基于qiankun框架
qiankun是蚂蚁金服开源的微前端解决方案：
// 主应用注册子应用
import { registerMicroApps, start } from 'qiankun'
registerMicroApps([
{
name: 'vueApp',
entry: '//localhost:7100',
container: '#subapp-viewport',
activeRule: '/vue'
}
])
start()使用iframe集成
传统但稳定的集成方式：
<iframe
src="http://child-app.com"
frameborder="0"
style="width:100%; height:100%"
></iframe>基于single-spa
通用的微前端框架方案：
// 注册应用
singleSpa.registerApplication(
'vueApp',
() => System.import('vueApp'),
location => location.pathname.startsWith('/vue')
)样式隔离方案
微前端需要解决样式冲突问题：
/* 使用CSS Modules */
:local(.className) {
color: red;
}
/* 使用Shadow DOM */
const shadow = element.attachShadow({mode: 'open'})状态管理共享
跨应用状态共享方案：
// 使用自定义事件
window.dispatchEvent(new CustomEvent('globalState', {detail: state}))
// 使用redux
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__?.())路由协调处理
主应用和子应用的路由协调：
// 主应用路由配置
{
path: '/app1/*',
component: Layout,
meta: { isMicroApp: true }
}
// 子应用路由base
const router = new VueRouter({
base: window.__POWERED_BY_QIANKUN__ ? '/app1' : '/',
routes
})构建部署注意事项
独立部署的构建配置要点：
// 子应用webpack配置
output: {
library: `${name}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${name}`
}每种方案都有其适用场景，Module Federation适合Webpack技术栈，qiankun提供完整解决方案，iframe简单但隔离性好，single-spa更灵活但配置复杂。选择时需考虑团队技术栈、项目规模和长期维护成本。
