vue怎么实现微前端
vue实现微前端的常见方法
使用qiankun框架
qiankun是基于single-spa的微前端解决方案，支持Vue项目作为主应用或子应用。主应用通过注册子应用的方式加载不同技术栈的微应用。
主应用配置示例：
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'vue-app',
entry: '//localhost:7101',
container: '#subapp-viewport',
activeRule: '/vue'
}
]);
start();子应用需要导出生命周期钩子：
export async function bootstrap() {
console.log('vue app bootstraped');
}
export async function mount(props) {
render(props);
}
export async function unmount() {
instance.$destroy();
}基于Webpack Module Federation
Webpack5的模块联邦特性可以实现组件级共享，适合Vue3项目。
配置示例：
// host应用webpack配置
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'
}
});iframe嵌套方案
通过iframe加载子应用，实现完全隔离：
<iframe
src="http://child-app.com"
frameborder="0"
style="width:100%;height:100%"
></iframe>基于Vue自定义元素
Vue3支持将组件编译为Web Components：
import { defineCustomElement } from 'vue'
const MyVueElement = defineCustomElement({
// 正常Vue组件选项
})
customElements.define('my-vue-element', MyVueElement)路由分发方案
通过不同路由加载不同子应用：
const routes = [
{
path: '/app1/*',
component: () => import('./App1Wrapper.vue')
},
{
path: '/app2/*',
component: () => import('./App2Wrapper.vue')
}
]技术选型建议
- 需要隔离性强的方案选择qiankun或iframe
- 需要组件共享选择Module Federation
- 简单项目可以考虑路由分发
- Vue3项目优先考虑Web Components方案
注意事项
- 样式隔离需要添加scoped或使用Shadow DOM
- 子应用间通信建议使用自定义事件或状态管理库
- 公共依赖需要做好版本管理
- 开发环境配置跨域支持
