上代码,不多说。
qiankun 需要一个基座项目,下面这个就是基座vue项目的main.js的配置。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
import {registerMicroApps, start} from 'qiankun'
const apps = [
{
name: 'vue',
entry: '//192.168.1.50:80',
// entry: 'http://localhost:12345/vue',
container: '#vue',
activeRule: '/vue',
props: {
store
}
}
]
registerMicroApps(apps)
start()
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
App.vue文件的配置
<template>
<div>
<el-menu :router="true" class="el-menu-demo" mode="horizontal">
<el-menu-item index="/">home</el-menu-item>
<el-menu-item index="/vue">vue</el-menu-item>
</el-menu>
<router-view/>
<div id="vue"></div> 这个就是子项目需要加载时的目标坑位
</div>
</template>
<style>
</style>
以上就是基座项目的基本配置。其中mian.js 中的 props可以传递给子项目。
下面是子项目的配置
main.js的配置信息。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
let instance = null;
function render() {
instance = new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
}
if (!window.__POWERED_BY_QIANKUN__) {
/* eslint-disable */
render()
} else {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
export async function bootstrap() {
}
export async function mount(props) {
console.log(props, 11)
render(props)
}
export async function unmount(props) {
instance.$destroy()
console.log(props)
}
下面是route配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: '/vue',
routes
})
export default router
注意:路由的base一定要配置,如果配置不正确,会出现子项目路由匹配不到。
下面是vue.config.js 配置信息
module.exports = {
publicPath: '/vue',
devServer: {
port: 12345,
headers: {
'Access-Control-Allow-Origin': '*'
}
},
configureWebpack: {
output: {
library: 'vue1',
libraryTarget: 'umd'
}
}
}
以上两个项目都是用vue脚手架生成的 版本是3.0.
qiankun这个框架很好用。子项目可以独立运行,独立部署,沙箱隔离。