vue3 vite 接入 qiankuan 微前端
vite 接入 qiankuan 微前端
·
原文链接:vite2 接入 qiankun 微前端 - 会写代码的赖先生 - 博客园 (cnblogs.com)
子应用使用vite
应用一直无法获取生命周期, 才知道 qiankun
暂时不支持 vite
应用 ,
推荐使用vite-plugin-qiankun插件来解决,
github地址:
tengmaoqing/vite-plugin-qiankun: 保留vite es特性,快速接入乾坤微前端子应用 (github.com)
优点
- 保留
vite
构建es
模块的优势 - 一键配置,不影响已有的
vite
配置 - 支持
vite
开发环境
安装插件
pnpm add vite-plugin-qiankun
配置 vite.config.js
// vue3
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun';
import { resolve } from 'path';
export default ({ mode }) => {
const __DEV__ = mode === 'development'
return defineConfig({
alias: {
'@': resolve('src'),
},
plugins: [ vue(),
qiankun('sub-vite2-vue3', {
useDevMode: true
})],
})
}
main.js 中设置导出相应的生命周期
// vue3 main.ts 无关代码自行省略
// @ts-nocheck
import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import App from "./App.vue";
import routes from "./router";
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
let router = null;
let instance = null;
renderWithQiankun({
mount(props) {
console.log( "qiankun-mount", props);
},
bootstrap() {
console.log("%c ", "color: green;", "sub-vite2-vue3 app bootstraped");
},
unmount(props: any) {
console.log( "qiankun-unmount");
},
});
参考资源:
更多推荐
已为社区贡献6条内容
所有评论(0)