vue3微前端架构——基于蚂蚁qiankun框架
楔子
首先，目前qiankun框架尚不支持vite，
微应用不能使用vite创建,
即使只是生产环境加的载微应用也不行，
因为vite打包代码时，内部的esbuild会tree shake掉与qiankun相关的生命周期钩子，
主应用没影响，使用什么创建项目都无所谓
主应用
没啥特殊的，随便一个组件里留个容器div
<div id="container"></div>在一个方法内加载微应用
import { loadMicroApp } from 'qiankun';
export default {
setup(){
let create = ()=>{
loadMicroApp({
name: 'vue3',
entry: 'http://localhost:7105/',
container: '#container',
});
}
return {create};
}
}通过路由注册微应用的方式，请自己看文档
微应用
配置文件：vue.config.js
const path = require('path');
const { name } = require('./package');
function resolve(dir) {
return path.join(__dirname, dir);
}
const port = 7105;
module.exports = {
outputDir: 'dist',
assetsDir: 'static',
filenameHashing: true,
devServer: {
hot: true,
disableHostCheck: true,
port,
overlay: {
warnings: false,
errors: true,
},
headers: {
'Access-Control-Allow-Origin': '*',
},
},
// 自定义webpack配置
configureWebpack: {
resolve: {
alias: {
'@': resolve('src'),
},
},
output: {
// 把子应用打包成 umd 库格式
library: `${name}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${name}`,
},
},
};router.js
import HelloWorld from "./components/HelloWorld.vue";
import HelloWorld2 from "./components/HelloWorld2.vue";
import { createRouter, createWebHistory } from "vue-router";
const routes = [
{ path: "/", component: HelloWorld },
{ path: "/about", component: HelloWorld2 },
];
const router = createRouter({
history: createWebHistory(window.__POWERED_BY_QIANKUN__ ? "/vue3" : "/"),
routes,
});
export default router;main.js
这里有好多钩子，是给主应用用的
if (window.__POWERED_BY_QIANKUN__) {
// eslint-disable-next-line no-undef
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
let instance = null;
function render(props = {}) {
const { container } = props;
instance = createApp(App);
instance.use(router);
instance.mount(container ? container.querySelector("#app") : "#app");
}
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
export async function bootstrap() {
console.log("%c ", "color: green;", "vue3.0 app bootstraped");
}
export async function mount(props) {
render(props);
instance.config.globalProperties.$onGlobalStateChange =
props.onGlobalStateChange;
instance.config.globalProperties.$setGlobalState = props.setGlobalState;
}
export async function unmount() {
instance.unmount();
instance._container.innerHTML = "";
instance = null;
}app.vue
<template>
<button @click="go('/')">home</button>
<button @click="go('/about')">sub</button>
<router-view></router-view>
</template>
<script>
import router from "./router"
export default {
setup(){
let go = (p)=>{
router.push(p)
}
return {go}
}
}
</script>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-12-05 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读