vite3项目接入qiankun微前端

背景

前端时间对vite3项目接入了qiankun微前端，对操作过程和遇到的坑做一些整理，废话不多说，直接上代码。

1、在 vite.config.ts 中安装插件

// vite.config.ts

import qiankun from 'vite-plugin-qiankun';

export default {
  // 这里的 'myMicroAppName' 是子应用名，主应用注册时AppName需保持一致
  plugins: [qiankun('myMicroAppName')],
  // 生产环境需要指定运行域名作为base
  base: 'http://xxx.com/'
}

2、在入口文件里面写入乾坤的生命周期配置

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

// some code
renderWithQiankun({
  mount(props) {
    console.log('mount');
    render(props);
  },
  bootstrap() {
    console.log('bootstrap');
  },
  unmount(props: any) {
    console.log('unmount');
    const { container } = props;
    const mountRoot = container?.querySelector('#root');
    ReactDOM.unmountComponentAtNode(
      mountRoot || document.querySelector('#root'),
    );
  },
});

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

3、dev下作为子应用调试

因为开发环境作为子应用时与热更新插件（可能与其他修改html的插件也会存在冲突）有冲突，所以需要额外的调试配置

// useDevMode 开启时与热更新插件冲突,使用变量切换
const useDevMode = true

const baseConfig: UserConfig = {
  plugins: [
    ...(
      useDevMode ? [] : [
        reactRefresh()
      ]
    ),
    qiankun('viteapp', {
      useDevMode
    })
  ],
}

上面例子中 useDevMode = true 则不使用热更新插件，useDevMode = false 则能使用热更新，但无法作为子应用加载。

4、其它使用注意点 qiankunWindow

因为es模块加载与qiankun的实现方式有些冲突，所以使用本插件实现的qiankun微应用里面没有运行在js沙盒中。所以在不可避免需要设置window上的属性时，尽量显示的操作js沙盒，否则可能会对其它子应用产生副作用。qiankun沙盒使用方式

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

qiankunWindow.customxxx = 'ssss'

if (qiankunWindow.__POWERED_BY_QIANKUN__) {
  console.log('我正在作为子应用运行')
}

5、静态资源加载

完成接入后，在主应用中静态资源加载有异常，这个时候需要调整 vite.config.js配置

export default defineConfig({
  base: process.env.NODE_ENV === 'development' ? 'http://localhost:8084/' : 'https://lxq.q-gp.com/', // 根据构建模式不同设置对应的基础连接
  server: {
    port: 8084, //调整终端
    cors: true,
    origin: 'http://localhost:8084/', // 设置开发服务器origin
  },

对应引用的静态资源处，如果使用的相对路径需要调整为路径别名引用

<template>
  <div class="home">
<!--     // 使用@ 路径别名 -->
    <img alt="Vue logo" src="@/assets/logo.png" />
    <p>Welcome to Your Vue.js + TypeScript App</p>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'Home',
  });
</script>

6、路由调整

如果按以上方式页面没有加载，控制台报[Vue Router warn]: No match found for location with path "/micro/monitor-system"这样的错误，需要调整子应用的路由base选项

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

const router = createRouter({
  history: createWebHistory('/micro/monitor-system'), // 配置路由base 
});

export default router;