主应用配置
1、主应用安装qiankun
cnpm i qiankun
2、在main.js中引入qiankun
import Vue from 'vue'
import App from './App.vue'
import { registerMicroApps, start } from 'qiankun' //新增1
import router from './router'
Vue.config.productionTip = false
// 在主应用中注册子应用 新增2
registerMicroApps([{
name: 'vueApp',
entry: '//localhost:8082', //子应用的启用地址
container: '#app-vue', //子应用所展示的地址 在App.vue中设置id为app-vue
activeRule: '/app-vue', //路由地址
props: {
data: 'child子应用'
}
}])
start()
new Vue({
router,
render: h => h(App),
}).$mount('#app')
3、App.vue中设置子应用的位置
<template>
<div id="app">
主应用
<router-view></router-view>
<div id="app-vue"></div>//更改处
</div>
</template>
4、router设置
import Vue from 'vue'
import VueRouter from 'vue-router'
import ParentVue from '../views/ParentVue.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'ParentVue',
component: ParentVue
}
]
const router = new VueRouter({
mode: 'history',//需要增加
routes
})
export default router
子应用
子应用不需要安装qiankun
1、新增public-path.js (与main.js同级)
/* eslint-disable camelcase */
if (window.__POWERED_BY_QIANKUN__) {
// eslint-disable-next-line no-undef
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
2、main.js
1、引入public-path.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './public-path' //引入
Vue.config.productionTip = false
//下方新增
let instance = null
function render (props = {}) {
const { container } = props
instance = new Vue({
router,
render: (h) => h(App)
}).$mount(container ? container.querySelector('#app-vue') : '#app-vue') //app-vue是在主应用中设置的id
}
// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
render()
}
export async function bootstrap () {
console.log('bootstraped')
}
export async function mount (props) {
console.log('mount')
render(props)
}
export async function unmount () {
console.log('unmount')
instance.$destroy()
instance.$el.innerHTML = ''
instance = null
}
new Vue({
router,
store,
render: (h) => h(App)
}).$mount('#app-vue')
3、路由设置
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect:'/home'
},
{
path: '/home',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: 'about' */ '../views/AboutView.vue')
}
]
const router = new VueRouter({
base: window.__POWERED_BY_QIANKUN__ ? '/app-vue' : '/', //新增
mode: 'history',//新增
routes
})
export default router
4、打包设置
const name='child111'
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
lintOnSave:false,
transpileDependencies: true,
devServer: {
port: 8082, //子应用启动端口号,不可随意修改,与上文中父应用注册的子应用端口号对应
headers: {
"Access-Control-Allow-Origin": "*", //循序跨域
},
},
configureWebpack: {
output: {
library: `${name}-[name]`,
libraryTarget: "umd", // 把微应用打包成 umd 库格式
// jsonpFunction: `webpackJsonp_${name}`,
}
}
})
此文章只是简单的加入了qiankun。
其中带来的样式问题还未探究