前言
基座:基于vite的vue3.2 (base-app)
子程序:基于vite的vue3.2 (micro-app-vue)、基于webpack的Angular (micro-app-angular)、基于webpack的React (micro-app-react)
一、基于vite的vue3.2基座配置(base-app)
1. 安装路由和配置路由,和往常一样,过程略
2. App.vue
<template>
<div style="text-align: center">
<router-link to="/"><h1>这里是主应用</h1></router-link>
<br />
<router-link to="/vue">显示Vue微应用</router-link>
<br />
<router-link to="/angular">显示Angular微应用</router-link>
<br />
<router-link to="/react">显示React微应用</router-link>
<hr />
<!-- 准备好子应用待渲染的容器 -->
<div id="microAppContainer"></div>
</div>
</template>
<script setup lang="ts"></script>
<style scoped></style>
3. 安装qiankun
npm i qiankun -S
4. 新建registerApps.ts文件后在main.ts引入,或直接在main.ts写入如下内容,以下为新建
- registerApps.t
// 注册微应用文件
import { registerMicroApps, start } from 'qiankun';
// 注册多个微应用
registerMicroApps(
[
{
name: 'micro-app-vue',
entry: '//localhost:8001',
container: '#microAppContainer', // App.vue配置的节点
activeRule: '/vue',
props: {} // 用于传参
},
{
name: 'micro-app-angular',
entry: '//localhost:4200',
container: '#microAppContainer', // App.vue配置的节点
activeRule: '/angular',
props: {} // 用于传参
},
{
name: 'micro-app-react',
entry: '//localhost:6000',
container: '#microAppContainer', // App.vue配置的节点
activeRule: '/react',
props: {} // 用于传参
},
],
{
beforeLoad: async (app) => {
console.log('beforeLoad...', app.name);
},
beforeMount: async (app) => {
console.log('beforeMount...', app.name);
},
afterMount: async (app) => {
console.log('afterMount...', app.name);
},
afterUnmount: async (app) => {
console.log('afterUnmount...', app.name);
}
}
);
// 启动 qiankun
// start({
// prefetch: 'all', // 预加载
// sandbox: {
// strictStyleIsolation: true, // 开启严格的样式隔离模式
// experimentalStyleIsolation: true
// }
// });
start();
- main.ts
import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import router from './router/router';
// 在main.ts引入registerMicroApp.ts
import './registerApps';
createApp(App).use(router).mount('#app');
二、基于vite的vue3.2子程序配置(micro-app-vue)
1. 安装路由和配置路由,和往常一样,过程略
2. 安装vite-plugin-qiankun插件
npm i vite-plugin-qiankun -S
3. 配置vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import qiankun from 'vite-plugin-qiankun';
// https://vitejs.dev/config/
export default defineConfig({
base: '/vue',
plugins: [vue(), qiankun('micro-app-baseVue', { useDevMode: true })],
server: {
host: '0.0.0.0',
port: 8001, // 2000端口
open: false,
cors: true,
origin: 'http://localhost:8001'
}
});
4. 配置main.ts
import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
import router from './router/router';
let app: any;
// 没有乾坤时,即独立运行
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
// render();
createApp(App).use(router).mount('#app');
} else {
renderWithQiankun({
mount(props) {
app = createApp(App);
app.mount(props.container?.querySelector('#app'));
},
bootstrap() {
console.log('bootstrap');
},
update() {
console.log('update');
},
unmount() {
console.log('unmount');
app?.unmount();
}
});
}
三、基于vite的Angular子程序配置(micro-app-angular) 暂略
四、基于vite的React子程序配置(micro-app-react) 暂略
标签:vue,app,微程序,qiankun,Vue3,import,App,vite From: https://www.cnblogs.com/suihung/p/17054935.html