qiankun 集成 vue3+vite

使用 qiankun 集成 vue3+vite 项目

基座项目

基座项目可见qiankun 示例

子应用改造

vite 本身不支持 qiankun，需要安装 vite-plugin-qiankun

pnpm install vite-plugin-qiankun

配置环境变量

配置环境变量，是子应用既可以单独运行又可以接入主应用

.env

NODE_ENV=development
VITE_APP_BASE_URL=/

.env.micro

NODE_ENV=development
VITE_APP_BASE_URL=/app3

.env.buildMicro

NODE_ENV=development
VITE_APP_BASE_URL=/app3

然后在 package.json 中配置启动脚本

{
  "scripts": {
    "dev": "vite",
    "dev:micro": "vite --mode micro",
    "build": "run-p type-check \"build-only {@}\" -- --mode micro",
    "preview": "vite preview"
  },
}

入口文件改造

使用插件中的 renderWithQiankun 配置生命周期

import './assets/main.css';

import { createApp } from 'vue';
import { createPinia } from 'pinia';

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

import App from './App.vue';
import router from './router';

console.log(
  qiankunWindow.__POWERED_BY_QIANKUN__,
  'qiankunWindow.__POWERED_BY_QIANKUN__'
);

let app: any = null

const render = (props: QiankunProps) => {
  const { container } = props;
  app = createApp(App);
  app.use(createPinia());
  app.use(router);
  app.mount(container ? container.querySelector('#app')! : '#app');
};

renderWithQiankun({
  mount(props: QiankunProps) {
    console.log(props);
    render(props);
  },
  bootstrap() {},
  unmount() {
    app.unmount()
  },
  update() {},
});

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

路由改造

修改路由的 baseUrl 为之前配置的环境变量

import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
console.log(qiankunWindow, 'qiankunWindow.__POWERED_BY_QIANKUN__');

const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_APP_BASE_URL),
});

修改打包配置

除了导出的生命周期，还要在打包配置中修改

import { fileURLToPath, URL } from 'node:url';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import vueDevTools from 'vite-plugin-vue-devtools';
import qiankun from 'vite-plugin-qiankun';

const { name } = require('./package');

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  return {
    base: mode === 'development' ? './' : '/app3',
    plugins: [
      vue(),
      vueJsx(),
      // vueDevTools(),
      qiankun(name, { useDevMode: true }),
    ],
    server: {
      port: 8083,
    },
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
  };
});

注意事项

如果使用了 vue 调试插件 vite-plugin-vue-devtools，作为子应用嵌入时可能会出现报错，或者子应用无法正常加载的问题，只需要在子应用的 vite.config.ts 中注释插件即可

vue调试插件报错

注册子应用

子应用配置完成后，到基座应用中去注册

const apps: RegistrableApp<any>[] = [
  // ...
  {
    name: 'app3',
    entry: 'http://localhost:8083/app3',
    container: '#microApp',
    activeRule: '/app3',
  },
];

registerMicroApps(apps);
start();

子应用增加功能

在子应用中添加随意内容，并测试嵌入后是否正常显示

正常加载