qiankun在主应用、子应用均为vue3+vite+typescript中的使用

在Vue3 + Vite + TypeScript环境中使用qiankun时，你需要确保主应用和子应用的初始化配置正确。以下是一个基本的示例：

主应用（Main App）:

1. 安装qiankun：

npm install qiankun # 或者 yarn add qiankun

2. 在main.ts中启动qiankun：

import { createApp } from 'vue';
import App from './App.vue';
import { registerMicroApps, start } from 'qiankun';
 
const app = createApp(App);
 
registerMicroApps([
  {
    name: 'vue-app1', // 子应用的名称
    entry: '//localhost:7100', // 子应用的入口地址
    container: '#vue-app1', // 挂载点的DOM ID
    activeRule: '/vue-app1', // 激活子应用的路由规则
  },
  // ...可以添加更多子应用配置
]);
 
// 启动qiankun
start();
 
app.mount('#app');

子应用（Micro App）:

1. 安装qiankun：

npm install qiankun # 或者 yarn add qiankun

2. 在vite-env.d.ts中声明全局变量（Vite需要）：

/// <reference types="vite/client" />
 
interface Window {
  __POWERED_BY_QIANKUN__?: {
    mount: (props: any) => void;
    unmount: () => void;
  };
}

3. 在main.ts中导出生命周期钩子：

import { createApp } from 'vue';
import App from './App.vue';
 
let instance: ReturnType<typeof createApp>;
 
function render(props = {}) {
  instance = createApp(App);
  instance.mount(props.container ? props.container.querySelector('#app') : '#app');
}
 
function unmount() {
  instance?.unmount();
}
 
export async function bootstrap() {
  console.log('[vue-app1] vue app bootstraped');
}
 
export async function mount(props) {
  render(props);
  console.log('[vue-app1] vue app mounted');
}
 
export async function unmount(props) {
  unmount();
  console.log('[vue-app1] vue app unmounted');
}

确保主应用和子应用的publicPath都正确设置，以便于正确加载资源。在Vite中，可以通过配置vite.config.ts来设置：

import { defineConfig } from 'vite';
 
export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? '/vue-app1/' : '/',
  // ...其他配置
});

以上代码提供了主应用和子应用的基本配置，确保它们能够在Vue3 + Vite + TypeScript环境中正确运行。在实际应用中，还需要考虑更多细节，如样式隔离、数据通信等。