qiankun 集成 vue2+vite

使用 qiankun 集成 vue2+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=/app2

.env.buildMicro

NODE_ENV=development
VITE_APP_BASE_URL=/app2

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

{
  "scripts": {
    "dev": "vite",
    "dev:micro": "vite --mode micro",
    "build": "tsc && vite build --mode micro",
    "preview": "vite preview"
  },
}

入口文件改造

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

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

const render = (props: QiankunProps) => {
  const { container } = props;
  new Vue({
    router,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app')! : '#app');
};

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

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

路由改造

vue2 作为子项目时需要将 mode 配置成history，并将 base 换成配置好的环境变量

const router = new VueRouter({
  mode: 'history',
  base: import.meta.env.VITE_APP_BASE_URL,
  routes,
});

修改打包配置

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

import { defineConfig, loadEnv } from 'vite';
import type { ConfigEnv } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';
import { resolve } from 'path';
import qiankun from 'vite-plugin-qiankun';

const name = require('./package.json').name;

export default defineConfig((env: ConfigEnv) => {
  const { mode } = env;
  return {
    plugins: [createVuePlugin(), qiankun(name, { useDevMode: true })],
    base: loadEnv(mode, process.cwd()).VITE_APP_BASE_URL,
    // ...
  };
});

注册子应用

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

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

registerMicroApps(apps);
start();

子应用增加功能

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

正常加载