[JavaScript知识库]vue3+qiankun+vite搭建微前端服务

因业务需要搭建一套微前端服务, 阅读文档时发现qiankun与vite无法一起使用,需要引入额外插件才可以一起使用,在这里记录下

qiankun基座配置

1.修改index.html中div的id,并在main.js中修改挂在函数

//index.html
<div id="qiankunBaseApp"></div>
//main.js
createApp(App)
  .mount('#qiankunBaseApp')

2.main.js启动qiankun

import { registerMicroApps, start } from 'qiankun';
const apps = [
  {
    name: 'qiankunPiggy',
    entry: '//localhost:5392',
    fetch,
    container: '#qiankunPiggy',
    activeRule: '/qiankun-piggy',
  }
]
registerMicroApps(apps);
start({
  prefetch: false // 取消预加载
});

3.在相应位置设置子应用挂载div

<router-view></router-view>
<div id="qiankunPiggy"></div>

4.接受子应用路由信息并注册
这里我自己写的可能有问题,暂时还没有发现

//main.js
import actions from '../../utils/qiankunUtil/actions'
const router = useRouter()
//将子应用路由加入基座路由中
actions.onGlobalStateChange((state, prevState) => {
  if (state.routerInfo.name != 'base') {
    const childName = state.routerInfo.name
    const childRoutes = state.routerInfo.router.getRoutes()
    let routerInfo = []
    for (let i = 0; i < childRoutes.length; i++) {
      const ele = childRoutes[i];
      let data = { path: '', name: '', component: () => import('../../layout/index.vue') }
      data.path = '/' + childName + ele.path; data.name = ele.name
      routerInfo.push(data)
      router.addRoute(data)
    }
  }
})
actions.setGlobalState({ routerInfo: { name: 'base', router: router } })

//../../utils/qiankunUtil/actions
import { initGlobalState, MicroAppStateActions } from "qiankun";

const initialState = {};
const actions: MicroAppStateActions = initGlobalState(initialState);

export default actions;

子应用配置

1.修改index.html中div的id 并修改main.js中挂载函数

//index.html
<div id="qiankunPiggyApp"></div>
//main.js
createApp(App)
  .mount('#qiankunPiggyApp')

2.在src下创建public-path.js,并在main.js中导入

//public-path.js
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
//main.js
import './public-path.js'

3.引入第三方插件,在main.js中注册并判断是否为qiankun运行
需要提前npm i vite-plugin-qiankun
在这里需要将子路由的路由信息传给基座并在基座中注册,负责会导致以基座搭建的layout无法显示,页面空白

import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';

let router: any = null;
let instance: any = null;
let history: any = null

function render(props: any = {}) {
  const { container } = props;
  history = createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/qiankun-piggy' : '/');
  router = createRouter({
    history,
    routes,
  });

  instance = createApp(App);
  instance.use(router);
  instance.use(props);
  instance.mount('#qiankunPiggyApp');
}

function storeTest(props: any) {
  props.onGlobalStateChange &&
    props.onGlobalStateChange(
      (value: any, prev: any) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev),
      true,
    );
}
renderWithQiankun({
  mount(props) {
    storeTest(props)
    render(props);
    props.setGlobalState({ routerInfo: { name: props.name, router: router } });
    instance.config.globalProperties.$onGlobalStateChange = props.onGlobalStateChange;
    instance.config.globalProperties.$setGlobalState = props.setGlobalState;
  },
  bootstrap() {
    console.log('bootstrap');
  },
  unmount(props: any) {
    console.log('unmount', props);
    instance.unmount();
    instance._container.innerHTML = '';
    instance = null;
    router = null;
    history.destroy();
  },
});

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render();
}

4.在vite.config.ts中修改配置

module.exports = {
    devServer: {
        port: 5392,
        headers: {
            'Access-Control-Allow-Origin': '*'
        }
    },
    configureWebpack: {
        output: {
            library: 'qiankunPiggy',
            libraryTarget: 'umd'
        }
    }
}

有点乱,很多问题我现在也没明白,只是暂时可以正常运行