首先最少创建两个项目:一个主系统:vue-qiankun-base(vue create vue-qiankun-base);一个子系统:vue-qiankun-app(vue create vue-qiankun-base)
一、主系统搭建
1.先安装qiankun
npm i qiankun -S
2.子应用项目导入
main.js
import { registerMicroApps, start } from 'qiankun';
Vue.config.productionTip = false
registerMicroApps([
{
name: 'qiankun-app',
entry: '//localhost:8082/',// 运行微应用的地址
container: '#qiankun-app',// 展示的DOM容器 id
activeRule: '/',// 跳转路径
props: {
token: '',
}// 通过props实现通信传递值
},
]);
// // 启动 qiankun
start({ prefetch: false });
3.子系统在主系统挂载
App.vue
<template>
<div id="app">
<div id="qiankun-app"></div>
<!-- 注释:这里的qiankun-app对应main.js中registerMicroApps的container -->
</div>
</template>
二、子系统搭建
1.在src下新建public-path.js文件
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
2.在main.js里写配置项
import Vue from 'vue'
import App from './App.vue'
import './public-path';
import VueRouter from 'vue-router';
import routes from './router';
Vue.config.productionTip = false
let router = null;
let instance = null;
function render(props = {}) {
const { container } = props;
router = new VueRouter({
base: window.__POWERED_BY_QIANKUN__ ? '/child/' : '/',
mode: 'hash',
routes,
});
instance = new Vue({
router,
render: (h) => h(App),
}).$mount(container ? container.querySelector('#app') : '#app');
}
// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
export async function bootstrap() {
console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
console.log('[vue] props from main framework', props);
render(props);
}
export async function unmount() {
instance.$destroy();
instance.$el.innerHTML = '';
instance = null;
router = null;
}
3.修改vue.config.js
const webpack = require('webpack')
const { name } = require('./package')
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
const { defineConfig } = require('@vue/cli-service')
const publicPath = '/'
module.exports = defineConfig({
transpileDependencies: true,
publicPath,
outputDir: 'child',
assetsDir: 'static',
productionSourceMap: false,
devServer: {
port: 8082,
headers: {
'Access-Control-Allow-Origin': '*',
},
},
configureWebpack: {
resolve: {
alias: {
'@': resolve('src'),
},
},
output: {
// 把子应用打包成 umd 库格式
library: `${name}-[name]`,
libraryTarget: 'umd',
}
},
})