vue项目集成qiankun微前端
集成乾坤微前端主应用：1.安装2.main.js中进行配置3.配置路由4.将主应用路由模式设置为history模式 子应用中配置（子应用无需安装乾坤）1.在src目录下增加public-path.js文件2.在main.js中写入生命周期函数3.在vue.config.js里面进行配置4.修改router配置5.检查package.json中的name是否与主应用中注册的name一致6.重启子应用，进行跳转集成乾坤微前端主应用：
1.安装
npm i qiankun -S
qiankun文档官方地址：/zh/guide
2.main.js中进行配置
import {registerMicroApps, start} from 'qiankun';Vue.config.productionTip = false;registerMicroApps([{name: 'test-web', // app name registeredentry: 'http://localhost:8081/', //项目地址container: '#test-web',//加载组件的控件idactiveRule: '/test_web',sanbox: true //解决css冲突},]);//开启样式 主子应用样式隔离start({sandbox: {experimentalStyleIsolation: true}});
3.配置路由
新建一个.vue文件
<template>//此处id与container保持一致<div id="test-web"></div></template>
配置路由地址
{path: '/test-web/*',name: 'test-web',component: () => import('@/views/test-web')},
4.将主应用路由模式设置为history模式
子应用中配置（子应用无需安装乾坤）
1.在src目录下增加public-path.js文件
if (window.__POWERED_BY_QIANKUN__) {// eslint-disable-next-line no-undef__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;}
2.在main.js中写入生命周期函数
//引入public-path.jsimport "./public-path";let instance = null;function render(props = {}) {const {container} = props;console.log(11111111111111, window.__POWERED_BY_QIANKUN__, '字段值')instance = new Vue({router,store,render: h => h(App),}).$mount(container ? container.querySelector('#app') : '#app', true); //开启沙箱}if (!window.__POWERED_BY_QIANKUN__) {console.log('独立运行')render();}function storeTest(props) {props.onGlobalStateChange &&props.onGlobalStateChange((value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev),true,);props.setGlobalState &&props.setGlobalState({ignore: props.name,user: {name: props.name,},});}export async function bootstrap() {console.log('111111111111 [vue] vue app bootstraped');}export async function mount(props) {console.log('11111111111 [vue] props from main framework', props);storeTest(props);render(props);}export async function unmount() {instance.$destroy();instance.$el.innerHTML = '';instance = null;}
3.在vue.config.js里面进行配置
const {name} = require('./package');module.exports = {devServer: {headers: {'Access-Control-Allow-Origin': '*',},},// 自定义webpack配置configureWebpack: {output: {// 把子应用打包成 umd 库格式library: `${name}-[name]`,libraryTarget: 'umd',//脚手架5.0 jsonpFunction 改为 chunkLoadingGlobaljsonpFunction: `webpackJsonp_${name}`,},},}
4.修改router配置
const routerConfig = {base: window.__POWERED_BY_QIANKUN__ ? '/test-web/' : '/',routes: []}
