当前位置：首页 > news >正文

qiankun + Vue实现微前端服务

news 2025/11/8 7:57:34

本文介绍如何使用qiankun + Vue搭建一个前端微服务

一、什么是微前端

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

以上内容均来自于 qiankun手册，有兴趣可以也看看这个api文档，很多关于微前端的困惑都在里面，以及为什么是不用iframe等....
本文代码，可以直接食用：qiankun-demo
效果:

微前端效果.gif

二、创建应用

在本例子中，我们需要通过vue-cli创建创建一个主应用，两个子应用。
目录结构：

|——qiankun-demo // 主文件夹
|——|——child-app01 //子应用1
|——|——child-app02 //子应用2
|——|——main-app //主应用
|——|——server.js // 自己写的一个快捷启动服务脚本，手动启动服务的可以忽略
|——|——package.js // 脚本依赖，手动启动服务的可以忽略

三、应用配置

主应用相关代码：

qiankun是通过registerMicroApps(apps, lifeCycles)API来注册子应用的，在main-app目录下

npm install qiankun -S
npm install element-ui -S // 引入element快速实现样式

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(element);
import { registerMicroApps, start } from 'qiankun'Vue.config.productionTip = falseconst microAppNum = 2
let apps = [];
for (let i = 1; i <= microAppNum; i++) {apps.push({name: '子应用child0' + i,entry: 'http://localhost:90' + i + '0',//fetch,container: '#vue',activeRule: '/child0' + i,props: { param01: i }});
}
const config = {beforeLoad: [app => {console.log("%c before load",'background:#0f0 ; padding: 1px; border-radius: 3px;  color: #fff',app);}], // 挂载前回调beforeMount: [app => {console.log("%c before mount",'background:#f1f ; padding: 1px; border-radius: 3px;  color: #fff',app);}], // 挂载后回调afterUnmount: [app => {console.log("%c after unload",'background:#a7a ; padding: 1px; border-radius: 3px;  color: #fff',app);}] // 卸载后回调}
registerMicroApps(apps, config);
let option = { prefetch: false }
start();new Vue({router,store,render: h => h(App)
}).$mount('#app')

如果暂时不需要看到生命周期的输出，可以不定义config，同时注册应该时registerMicroApps(apps, config);把里面的config去掉即可
其中的container内的#vue，对应app.vue内的id="vue"元素块

vue.config.js

若不存在该文件，新建一个vue.config.js

module.exports = {devServer: {port: 9000,headers: {//'Access-Control-Allow-Origin': "*"}}
};

App.vue

利用引入的element，快速搭建一个简单的页面

<template><div><el-menu :router="true" mode="horizontal"><el-menu-item index="/">首页</el-menu-item><el-menu-item v-for="no in  microAppNum" :key="no" :index="'/child0'+no">子应用0{{no}}</el-menu-item></el-menu><router-view /><!-- 子应用入口 --><div id="vue"></div></div>
</template><script>
export default {name: "main01",data() {return {microAppNum: 2};},
};
</script>

子应用配置

mian.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'// Vue.config.productionTip = falselet install = null;
function render(props) {install = new Vue({router,store,render: h => h(App)}).$mount('#app')
}
if (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
} else {render();
}
export async function bootstrap(props) {}export async function mount(props) {render(props);
}
export async function unmount(props) {install.$destroy();
}

vue.config.js

同样，在该文件内，

const port = 9010; // 一个应用写9010，另一个写9020
module.exports = {devServer: {port,headers: {'Access-Control-Allow-Origin': '*'}},configureWebpack: {output: {library: 'child',libraryTarget: 'umd'}}
};