Vue3 接入 qiankun 微前端

qiankun 官网：https://qiankun.umijs.org/zh
目前官网只有 Vue2 的接入介绍，本篇记录实战中 Vue3 的接入

vue 子应用代码改造

1. 新增 src/public-path.js 文件

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

2. 改造 src/main.js

import './public-path';

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/display.css'
import scui from './scui'
import i18n from './locales'
import router from './router'
import store from './store'
import App from './App.vue'


let app = createApp(App);
function render(props = {}) {
  const { container } = props;

  app.use(store);
  app.use(router);
  app.use(ElementPlus);
  app.use(i18n);
  app.use(scui);

  //挂载app
  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() {
  console.log('app unmount')
  app.unmount()
  app = null
}

3. 改造 vue.config.js

const { name } = require('./package');
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      chunkLoadingGlobal: `webpackJsonp_${name}`,
    },
  },

4. 改造 src/router/index.js

import {createRouter, createWebHistory} from 'vue-router';

const router = createRouter({
	history: createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/risk/' : '/'),
	routes: routes
})

qiankun 中添加子应用

在 registerMicroApps 中添加即可，可参考官网文档

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'vueApp',
    entry: '//localhost:8080',
    container: '#container',
    activeRule: '/app-vue',
  },
]);

关于鉴权

在 qiankun 中调用后端 api 时，也是会传送 token 或者 cookie 的。后端解析即可

参考

• 微前端实践教程