vue项目集成乾坤(qiankun)微前端

集成乾坤微前端主应用：

1.安装

npm i qiankun -S
qiankun文档官方地址：https://qiankun.umijs.org/zh/guide

2.main.js中进行配置

import {registerMicroApps, start} from 'qiankun';
Vue.config.productionTip = false;
registerMicroApps([
{
    name: 'test-web', // app name registered
    entry: 'http://localhost:8081/', //项目地址
    container: '#test-web',//加载组件的控件id
    activeRule: '/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.js
import "./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 改为 chunkLoadingGlobal
       jsonpFunction: `webpackJsonp_${name}`,
     },
   },
 }

4.修改router配置

 const routerConfig = {
   base: window.__POWERED_BY_QIANKUN__ ? '/test-web/' : '/',
   routes: []
 }

5.检查package.json中的name是否与主应用中注册的name一致

6.重启子应用，进行跳转