vue3+vite项目中使用qiankun的方式

需要安装的依赖：

 

"vite-plugin-qiankun": "1.0.10",

"vue-tsc": "^0.40.7"

"vite": "3.0.9",

"@vitejs/plugin-vue": "^1.6.0",

"vue": "^3.2.37",

"vue-router": "^4.1.3",

 

vue项目入口文件main.ts ：

 

import { createApp } from 'vue'

import App from './App.vue'

import routes from './router/routes'

import store from './store/index'

import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'

import { createRouter, createWebHistory } from 'vue-router'

 

let router: any = null

let app: any = null

let history: any = null

function render(props?) {

  let container

  if (props) {

    container = props.container

    props.onGlobalStateChange((state, preState) => {

      if (state.globalToken) {

        store.commit('setToken', state.globalToken)

        localStorage.setItem('token', state.globalToken)

      }

    }, true)

  }

  history = createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/appSub' : '/')

  router = createRouter({

    history,

    routes,

  })

 

  app = createApp(App)

  app.use(store)

  app.use(router)

  app.mount(container ? container.querySelector('#app') : document.getElementById('app'))

}

 

renderWithQiankun({

  bootstrap() {},

  mount(props) {

    render(props)

  },

  unmount() {

    app.unmount()

    app._container.innerHTML = ''

    history.destroy() // 不卸载  router 会导致其他应用路由失败

    router = null

    app = null

  },

})

 

// 独立运行时

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {

  render()

}

 

 

 vite.config.ts:

 

import { defineConfig, loadEnv } from 'vite' // defineConfig 工具函数 获取类型提示

import qiankun from 'vite-plugin-qiankun'

import { resolve } from 'path'

// useDevMode 开启时与热更新插件冲突

const useDevMode = true // 如果是在主应用中加载子应用vite,必须打开这个,否则vite加载不成功, 单独运行没影响

// @ts-ignore

export default defineConfig(({ mode }) => {

  const env = loadEnv(mode, process.cwd())

  let config = {

    plugins: [

      qiankun('appSub1', { useDevMode }),

    ],

  }

  return config

})