一个简单的前端微服务部署--qiankun

qiankun:基于single-spa封装,开箱即用。

一、主应用接入

1、安装qiankun

TypeScript 复制代码
npm i qiankun -S

2、主应用注册子应用

TypeScript 复制代码
//children-app.ts
import { registerMicroApps } from 'qiankun';
import shared from "./shared";
registerMicroApps([
  {
    name: 'subapp',
    entry: 'http://localhost:3001',
    container: '#subapp',
    activeRule: '#/subapp'
  }
]);

//入口文件 main.ts
import './children-app';

3、在主应用的路由页面加载子应用

TypeScript 复制代码
import { start } from 'qiankun';
onMounted(() => {
  if (!window.qiankunStarted) {
    window.qiankunStarted = true;
    start();
  }
})

二、子应用接入

1、安装

TypeScript 复制代码
npm i qiankun vite-plugin-qiankun -S

2、修改打包配置项

TypeScript 复制代码
//vite.config.ts
import qiankun from 'vite-plugin-qiankun';
export default defineConfig({
  base: 'http://localhost:3001/', //base设为绝对路径
  plugins: [
    vue(),
    qiankun('flow-graph', {
      useDevMode: true
    })
  ]
});

3、修改入口文件

TypeScript 复制代码
//main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import {
  renderWithQiankun,
  qiankunWindow
} from 'vite-plugin-qiankun/dist/helper';
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  createApp(App).use(router).mount('#app');
} else {
  let app: VueApp<Element>;
  renderWithQiankun({
    mount(props) {
      console.log('--mount');
      app = createApp(App);
      app
        .use(router)
        .mount(
          (props.container
           ? props.container.querySelector('#app')
           : document.getElementById('app')) as Element
        );
    },
    bootstrap() {
      console.log('--bootstrap');
    },
    update() {
      console.log('--update');
    },
    unmount() {
      console.log('--unmount');
      app?.unmount();
    }
  });
}
相关推荐
qq_3901617737 分钟前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.2 小时前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js