qiankun 创建vue3-vite子应用

帥气的那回首

已于 2024-06-04 14:27:50 修改

阅读量179

点赞数 2

文章标签：前端框架 vue.js 前端

于 2024-06-04 14:26:57 首次发布

本文链接：https://blog.csdn.net/m0_37609394/article/details/139442156

版权

创建 qiankun vue3-vite子应用

新建项目

npm create vue@latest

依赖qiankun vite 插件

npm i vite-plugin-qiankun

修改main.ts

import './assets/main.css'
import routes from '@/router'
import { createApp } from 'vue'
import App from './App.vue'
import {
  renderWithQiankun,
  qiankunWindow
} from 'vite-plugin-qiankun/dist/helper'
import type { QiankunProps } from "vite-plugin-qiankun/es/helper";
import { createPinia } from "pinia";

let instance: any = null;
instance = createApp(App)

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render({})
}

function render(props: QiankunProps = {}) {
  const {container} = props as any;
  instance = createApp(App)
  instance.use(routes)
  instance.use(createPinia())
  instance.mount(
    container ? container.querySelector('#app') : document.getElementById('app')
  )
  if (qiankunWindow.__POWERED_BY_QIANKUN__) {
    console.log('我正在作为子应用运行')
  }
}

// some code
renderWithQiankun({
  bootstrap: function (): void | Promise<void> {
  },
  mount: function (props: QiankunProps): void | Promise<void> {
    render(props)
  },
  unmount: function (props: QiankunProps): void | Promise<void> {
    instance.unmount()
    instance._container = null
    instance = null;
  },
  update: function (props: QiankunProps): void {
  }
})

配置vite 乾坤启动的相关配置

// vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import qiankun from "vite-plugin-qiankun";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    qiankun('flow-graph', {
      useDevMode: true
    })
  ],

  base: '/app-vue3-vite',
  server: {
    port: 3002,
    cors: true,
    origin: 'http://localhost:3002'
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

启动子应用
加入交流群
qq 群763367896