qiankun微应用Vue2中的基础使用

1.主应用

1.1下载乾坤

npm i qiankun -S

1.2src/main.js 

import Vue from 'vue';
import App from './App.vue';
import { router } from './router/index'; // 引入你的路由配置


import { registerMicroApps, start } from 'qiankun'


// // 定义一个列表  写入要注册的app
const apps = [
  {
    name: 'micro-vue-1', // 必须与微应用注册名字相同
    entry: 'http://localhost:5174', // 入口路径，开发时为微应用所启本地服务，上线时为微应用线上路径
    container: '#micro-app-container', // 微应用挂载的节点
    activeRule: '/wei1', // 当访问路由为 /micro-vue 时加载微应用
    props: {
      msg: '我是来自主应用的值-vue', // 主应用向微应用传递参数,
      routerBase: '/wei1'
    },
  }
]

// // 注册app
registerMicroApps(apps)
// 开启
start({
  prefetch: true, // 预加载子应用资源
  sandbox: { strictStyleIsolation: true } // 样式隔离配置
})
 
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

这里边主要就是在主营用引入相关的qiankun微应用的的配置规则，以及启动qiankun。

1.3vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
})

2.微应用

2.1.src/main.js

import Vue from 'vue';
import App from './App.vue';
import './public-path';
 
 
let instance = null;
 
function render(props = {}) {
  const { container } = props;
  console.log(props,'render')
 
  instance = new Vue({
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}
 
//不是在qiankun环境下的话，独立运行
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}
 
/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
  console.log('[vue] vue app bootstraped',1);
}
 
/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  console.log('qiankun-mount参数', props)
  render(props);
}
 
/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}
 
/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
  console.log('update props', props)
  render(props)  // 从qiankun启动
}

备注：在main.js主要就是为了渲染微应用，有一些周期函数。

2.2src下增加public-path.js文件

if (window.__POWERED_BY_QIANKUN__) {
  window.__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

2.3router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import AddPage from '../App.vue'
 
Vue.use(Router);

export const router = new Router({
  mode: 'history',
  base: window.__POWERED_BY_QIANKUN__ ? '/web1' : '/',
  routes: [
    { path: '', component: AddPage }, // 子应用根路径
    // 其他子路由...
  ]
})

备注：主要就两点，如果qiankun的话我们就增加跟/web1，与主营用一致，另外路由模式保持一致。

2.4vue.config.js主要配置打包一类的和容许跨域

const { defineConfig } = require('@vue/cli-service');
const {name} = require('./package').name;
module.exports = defineConfig({
  devServer: {
    port: 5174,
    // proxy: {
    //   '/add': {
    //     target: 'http://localhost:7101',
    //     changeOrigin: true
    //   }
    // },
    headers: {
      'Access-Control-Allow-Origin': '*',
    }
  },
  configureWebpack: {
    output: {
      library: `sub-app`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      chunkLoadingGlobal: `webpackJsonp_${name}`,
    },
  },
})

3.主应用与微应用之间的传值

3.1 主应用初始化全局状态

// 主应用 main.js
import { initGlobalState } from 'qiankun';

// 初始化全局状态
const actions = initGlobalState({ user: null });

// 提供修改状态的 API
export const setGlobalState = (state) => {
  actions.setGlobalState(state);
};

// 提供获取状态的 API
export const getGlobalState = () => {
  return actions.getGlobalState();
};

 3.2 微应用监听和修改全局状态

// 微应用 entry.js
import { initGlobalState } from 'qiankun';

// 获取全局状态
const actions = initGlobalState();

// 监听状态变化
actions.onGlobalStateChange((state, prev) => {
  console.log('状态变化:', state, prev);
});

// 修改全局状态
actions.setGlobalState({ theme: 'dark' });

3.3 传值流程 

主应用初始化全局状态-->微应用挂载时获取全局状态 --> 微应用监听状态变化 --> 状态变化时触发回调 --> 微应用修改全局状态（可选） --> 主应用响应状态变化（可选）

项目中使用会更加复杂一些，不过都是基于这个进行配置的，以上可以练习使用。