1磺浙、vite適配乾坤安裝插件
目前為止官方還沒有支持vite稻轨，直接使用的話只能解決build后的集成，看網(wǎng)上推薦路克，使用了 vite-plugin-qiankun 插件接入

# 安裝
npm i vite-plugin-qiankun

2、改造 vite.config.js养交，接入qiankun
其他示例

import { defineConfig } from 'vite'
import qiankun from 'vite-plugin-qiankun'

export default defineConfig((mode) => {
  return {
    plugins: [
      qiankun('subApp', { // 微應(yīng)用名字精算，與主應(yīng)用注冊的微應(yīng)用名字保持一致
        useDevMode: true,
      }),
    ],
  }
})

vben項目引用了build/vite/plugin/index.ts下的插件，因此修改此文件夾先的index.js文件

//引入群困
import qiankun from "vite-plugin-qiankun";
 // useDevMode 開啟時與熱更新插件沖突
 const useDevMode = true // 如果是在主應(yīng)用中加載子應(yīng)用vite,必須打開這個,否則vite加載不成功, 單獨運行沒影響

//插件列表最后push近乾坤插件
 vitePlugins.push(qiankun('sub-app', { 
    useDevMode 
  }))

3碎连、改造入口文件main.ts
改造入口文件灰羽，修改渲染以及添加生命周事件

import 'virtual:windi-base.css'
import 'virtual:windi-components.css'
import 'virtual:windi-utilities.css'
// Register icon sprite
import 'virtual:svg-icons-register'
import App from './App.vue'
import { createApp } from 'vue'
import { initAppConfigStore } from '/@/logics/initAppConfig'
import { router, setupRouter } from '/@/router'
import { setupRouterGuard } from '/@/router/guard'
import { setupStore } from '/@/store'
import { setupGlobDirectives } from '/@/directives'
import { setupI18n } from '/@/locales/setupI18n'
import { registerGlobComp } from '/@/components/registerGlobComp'
//main.ts 中引入rem.ts winnie
import './rem'
// TODO 測試web worker
// import './works'
import { queryFlags } from '/@/enums/workflowEnum'
window.queryFlags = queryFlags

// 按鈕權(quán)限
import btnDirective from '/@/directives/permission/permission'
// 自定義打印
import VueUeditorWrap from 'vue-ueditor-wrap'

import { isDevMode } from './utils/env'
import './assets/font/font.css'
if (isDevMode()) {
  import('ant-design-vue/es/style')
}
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import '/@/design/index.less'
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'


const app = createApp(App)
async function bootstrap({container}:any) {
  // const app = createApp(App)

  // Configure store
  // 配置 store
  setupStore(app)

  // Initialize internal system configuration
  // 初始化內(nèi)部系統(tǒng)配置
  initAppConfigStore()

  // Register global components
  // 注冊全局組件
  registerGlobComp(app)

  // Multilingual configuration
  // 多語言配置
  // Asynchronous case: language files may be obtained from the server side
  // 異步案例：語言文件可能從服務(wù)器端獲取
  await setupI18n(app)

  // Configure routing
  // 配置路由
  setupRouter(app)

  // router-guard
  // 路由守衛(wèi)
  setupRouterGuard(router)

  // Register global directive
  // 注冊全局指令
  setupGlobDirectives(app)

  // 注冊全局按鈕權(quán)限
  app.use(btnDirective).use(VueUeditorWrap)
  // Configure global error handling

  // https://next.router.vuejs.org/api/#isready
  // await router.isReady();
  app.use(Antd).mount(
    container ? container.querySelector('#sub-app') : document.getElementById('app')
  )
}

// bootstrap()
// 判斷是否是乾坤環(huán)境下
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  bootstrap({})
  // app.use(Antd).mount('#app')
} else {
  renderWithQiankun({
    mount(props) {
      console.log('--mount');
      bootstrap(props)
    },
    bootstrap() {
      console.log('--bootstrap');
    },
    update() {
      console.log('--update');
    },
    unmount() {
      console.log('--unmount');
      app?.unmount();
    }
  })
}

4、修改路由地址

//文件地址  src/router/index.ts
// app router
// 創(chuàng)建一個可以被 Vue 應(yīng)用程序使用的路由實例
export const router = createRouter({
  // 創(chuàng)建一個 hash 歷史記錄鱼辙。
  history: createWebHashHistory(
    qiankunWindow.__POWERED_BY_QIANKUN__ ? '/sub-app' : import.meta.env.VITE_PUBLIC_PATH),
  // 應(yīng)該添加到路由的初始路由列表廉嚼。
  routes: basicRoutes as unknown as RouteRecordRaw[],
  // 是否應(yīng)該禁止尾部斜杠。默認(rèn)為假
  strict: true,
  scrollBehavior: () => ({ left: 0, top: 0 }),
})

5倒戏、vite.config.js 修改

import type { UserConfig, ConfigEnv } from 'vite'
import pkg from './package.json'
import dayjs from 'dayjs'
import { loadEnv } from 'vite'
import { resolve } from 'path'
import { generateModifyVars } from './build/generate/generateModifyVars'
import { createProxy } from './build/vite/proxy'
import { wrapperEnv } from './build/utils'
import { createVitePlugins } from './build/vite/plugin'
import { OUTPUT_DIR } from './build/constant'

function pathResolve(dir: string) {
  return resolve(process.cwd(), '.', dir)
}

const { dependencies, devDependencies, name, version } = pkg
const __APP_INFO__ = {
  pkg: { dependencies, devDependencies, name, version },
  lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
}

export default ({ command, mode }: ConfigEnv): UserConfig => {
  const root = process.cwd()

  const env = loadEnv(mode, root)

  // The boolean type read by loadEnv is a string. This function can be converted to boolean type
  const viteEnv = wrapperEnv(env)

  const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE } = viteEnv

  const isBuild = command === 'build'

  return {
    base: VITE_PUBLIC_PATH,
    root,
    resolve: {
      alias: [
        {
          find: 'vue-i18n',
          replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
        },
        // /@/xxxx => src/xxxx
        {
          find: /\/@\//,
          replacement: pathResolve('src') + '/',
        },
        // /#/xxxx => types/xxxx
        {
          find: /\/#\//,
          replacement: pathResolve('types') + '/',
        },
      ],
    },
    server: {
      https: false,
      // Listening on all local IPs
      host: true,
      origin: 'http://localhost:3100',
      headers: { 'Access-Control-Allow-Origin': '*', },// 主應(yīng)用獲取子應(yīng)用時跨域響應(yīng)頭
      port: VITE_PORT,
      // Load proxy configuration from .env
      proxy: createProxy(VITE_PROXY),
    },
    esbuild: {
      pure: VITE_DROP_CONSOLE ? ['console.log', 'debugger'] : [],
    },
    build: {
      target: 'es2020',
      cssTarget: 'chrome80',
      outDir: OUTPUT_DIR,
      // minify: 'terser',
      /**
       * 當(dāng) minify=“minify:'terser'” 解開注釋
       * Uncomment when minify="minify:'terser'"
       */
      // terserOptions: {
      //   compress: {
      //     keep_infinity: true,
      //     drop_console: VITE_DROP_CONSOLE,
      //   },
      // },
      // Turning off brotliSize display can slightly reduce packaging time
      brotliSize: false,
      chunkSizeWarningLimit: 2000,
    },
    define: {
      // setting vue-i18-next
      // Suppress warning
      __INTLIFY_PROD_DEVTOOLS__: false,
      __APP_INFO__: JSON.stringify(__APP_INFO__),
      __COLOR_PLUGIN_OUTPUT_FILE_NAME__: undefined,
      __PROD__: true,
      __COLOR_PLUGIN_OPTIONS__: {},
    },

    css: {
      preprocessorOptions: {
        less: {
          modifyVars: generateModifyVars(),
          javascriptEnabled: true,
        },
      },
    },

    // The vite plugin used by the project. The quantity is large, so it is separately extracted and managed
    plugins: createVitePlugins(viteEnv, isBuild),

    optimizeDeps: {
      // @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
      esbuildOptions: {
        target: 'es2020',
      },
      include: [
        '@vue/runtime-core',
        '@vue/shared',
        '@iconify/iconify',
        'ant-design-vue/es/locale/zh_CN',
        'ant-design-vue/es/locale/en_US',
      ],
    },
  }
}

6怠噪、目前運行報錯頁面

設(shè)想的解決方案：

• 1、注釋掉該插件的引入杜跷，發(fā)現(xiàn)不報錯傍念，但是頁面不會跳轉(zhuǎn)了（實際上這個應(yīng)該進(jìn)入登錄頁的）