总结 vite + qiankun + vue3 遇到的坑
github 地址:https://github.com/zhousihang/vite-qiankun-vue3
node 版本:16.15.0
一、主应用(main)
- 首先通过 npm init vite@latest 创建主应用,项目名 main,框架 vue + ts 。
- 在 main 项目安装 qiankun 。
npm install qiankun -S
- 在 main/src 文件下创建 qiankun 文件夹 index.ts 文件,这里放置微应用的注册信息。
import { registerMicroApps, start } from 'qiankun' registerMicroApps([{ name: 'demo1', entry: process.env.NODE_ENV === 'development' ? 'http://localhost:8081' : '/demo1/', container: '#container', activeRule: '/demo1' }, { name: 'demo2', entry: process.env.NODE_ENV === 'development' ? 'http://localhost:8082' : '/demo2/', container: '#container', activeRule: '/demo2' } ]) start()
- 在 main 项目 main.ts 引入微应用注册信息
(上面那文件)
。import './qiankun'
主应用这样就配置好了
二、子应用
- 同样通过 npm init vite@latest 创建主应用,项目名 demo1 以及 demo2,框架 vue + ts。
所有子应用配法一样 demo1 跟 demo2,这里统称子应用。
- 子应用不需要安装 qiankun,但需要安装 vite-plugin-qiankun,在 main.ts 以及 vite.config.ts 里引入。
main.ts(示例):
// @ts-nocheck import { App, createApp } from 'vue' import { createRouter, createWebHistory } from 'vue-router' import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/es/helper' import app from './App.vue' import routes from './router' let root: App // renders 生命周期函数 renderWithQiankun({ mount (props: any) { render(props) }, bootstrap (props: any) { }, unmount () { root