qiankun官網(wǎng)
vite-plugin-qiankun插件github地址：vite-plugin-qiankun

主應(yīng)用

1、安裝乾坤

$ yarn add qiankun # 或者 npm i qiankun -S

2、在主應(yīng)用中注冊(cè)微應(yīng)用（main.ts）

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'react app', // app name registered
    entry: '//localhost:7100',
    container: '#vue-app-container',
    activeRule: '/yourActiveRule',
  },
  {
    name: 'vue app',
    entry: { scripts: ['//localhost:7100/main.js'] },
    container: '#vue-app-container',
    activeRule: '/yourActiveRule2',
  },
]);

start();

3、掛載

在App.vue掛載微應(yīng)用節(jié)點(diǎn)

  <div id="vue-app-container" />

子應(yīng)用

1、安裝插件

qiankun目前是不支持vite的，需要借助插件完成文章來源地址http://www.zghlxwxcb.cn/news/detail-547932.html

npm install vite-plugin-qiankun

2、修改vite.config.ts

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'

// useDevMode 開啟時(shí)與熱更新插件沖突
const useDevMode = true // 如果是在主應(yīng)用中加載子應(yīng)用vite,必須打開這個(gè),否則vite加載不成功, 單獨(dú)運(yùn)行沒影響

export default defineConfig(({ mode }) => {
  const root = process.cwd() //  process.cwd()返回當(dāng)前工作目錄
  const env = loadEnv(mode, root)

  let config = {
    base: env.VITE_BASE_API,
    plugins: [
    vue(),
    qiankun('vue-app', { // 微應(yīng)用名字，與主應(yīng)用注冊(cè)的微應(yīng)用名字保持一致
    { useDevMode }
    })
  ],
    resolve: {
      alias: {
        '@': _resolve('src')
      }
    },
    server: {
      host: 'x.x.x.x', // 暴露內(nèi)網(wǎng)ip
      port: 8000,
      cors: true,
      origin: mode === 'development' ? env.VITE_ORIGIN_DEV : env.VITE_BASE_API
    },
    output: {
      // 把子應(yīng)用打包成 umd 庫格式
      library: `${子應(yīng)用名}-[name]`,
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${子應(yīng)用名}`
    },
  }
  return config
})

3、修改main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import {
  renderWithQiankun,
  qiankunWindow
} from 'vite-plugin-qiankun/dist/helper'

let router = null
let instance = null
let history = null

instance = createApp(App)

declare global {
  interface Window {
    __POWERED_BY_QIANKUN__: any
    __INJECTED_PUBLIC_PATH_BY_QIANKUN__: any
  }
}

function render(props = {}) {
  const { container } = props as any
  history = createWebHashHistory(
    qiankunWindow.__POWERED_BY_QIANKUN__ ? '/calendar-mobile' : '/'
  )
  router = createRouter({
    history,
    routes
  })

  instance.use(router)
  //   instance.use(store);
  instance.mount(
    container ? container.querySelector('#app') : document.getElementById('app')
  )
  if (qiankunWindow.__POWERED_BY_QIANKUN__) {
    console.log('我正在作為子應(yīng)用運(yùn)行')
  }
}

// some code
renderWithQiankun({
  mount(props) {
    console.log('viteapp mount')
    render(props)
  },
  bootstrap() {
    console.log('bootstrap')
  },
  unmount(props) {
    console.log('vite被卸載了')
    instance.unmount()
    instance._container.innerHTML = ''
    history.destroy() // 不卸載  router 會(huì)導(dǎo)致其他應(yīng)用路由失敗
    router = null
    instance = null
  }
})

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

到了這里，關(guān)于使用vite-plugin-qiankun插件， 將應(yīng)用快速接入乾坤（vue3 vite）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！