微前端 vue实现
微前端 Vue 实现方案
微前端是一种将多个独立前端应用组合成一个整体的架构模式，适用于大型项目或团队协作。以下是基于 Vue 的微前端实现方案：
使用 qiankun 框架
qiankun 是蚂蚁金服开源的微前端解决方案，支持 Vue 作为主应用或子应用。
主应用配置：
// main.js
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'vue-sub-app',
entry: '//localhost:7101',
container: '#subapp-container',
activeRule: '/vue-sub-app',
},
]);
start();子应用配置：
// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
let instance = null;
function render(props = {}) {
const { container } = props;
instance = new Vue({
router,
render: h => h(App),
}).$mount(container ? container.querySelector('#app') : '#app');
}
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
export async function bootstrap() {}
export async function mount(props) { render(props); }
export async function unmount() { instance.$destroy(); }使用 Module Federation
Webpack 5 的 Module Federation 特性可以实现微前端架构。
主应用配置：
// webpack.config.js
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'host',
remotes: {
remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
},
}),
],
};子应用配置：
// webpack.config.js
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'remoteApp',
filename: 'remoteEntry.js',
exposes: {
'./App': './src/App.vue',
},
}),
],
};使用 iframe 方式
简单的微前端实现可以通过 iframe 完成，但交互性较差。
<template>
<iframe src="http://sub-app-domain.com" frameborder="0"></iframe>
</template>样式隔离方案
微前端需要解决样式隔离问题，推荐以下方法：
- 使用 Shadow DOM
- 约定 CSS 命名空间前缀
- 使用 postcss 自动添加命名空间
通信机制
微应用间通信常用方法：
- 使用 CustomEvent 进行事件通信
- 通过 shared 状态管理
- 使用 redux 或 vuex 进行状态共享
部署注意事项
- 子应用应支持独立部署
- 主应用和子应用使用不同的基路径
- 考虑 CDN 加速子应用资源加载
以上方案可根据项目需求选择，qiankun 是目前 Vue 微前端最成熟的解决方案，Module Federation 更适合 Webpack 5 技术栈的项目。
