vue3+vite项目如何作为微应用接入qiankun主应用

本地启动主应用及微应用，即可看到接入乾坤后的样子

如果启动主应用报错，可能是node版本过高，请降低版本

如果打包微应用报错，可能是node版本过低，请升高版本版本，或者添加打包配置

vite.config.js

添加打包配置
build: {
      target: 'esnext',
 }

主应用配置：

/config/subapps.js 配置前端地址

const SUB_APPS ={
 'suan-ni': {
    dev: '//localhost:5173',
    production: '/suan-ni'
  },
}


/config/proxy.js 配置后端地址

dev:{
  '/suan-ni/api': {
      target: 'http://10.130.149.37:5000',
      changeOrigin: true,
      pathRewrite: {
        '/suan-ni/api': ''
      },
    },
}

微应用配置：

pnpm install vite-plugin-qiankun

//vite.config.js 

import qiankun from "vite-plugin-qiankun"
export default ({ mode, command }) => {
 // mode: "test",//可设置mode， 开发模式下启动为development模式，build打包后为production模式
    plugins: [
      vue(),
      createSvg("./src/icons/svg/"),
      qiankun("production", {
        useDevMode: true
      })
    ],
    // base: "/production/",
    base: command === "build" ? "/production/" : "/", // 生产环境需要指定运行域名作为base
    resolve: {
      // 配置别名
      alias: [
        {
          find: "@",
          replacement: resolve(__dirname, "src")
        }
      ]
    },
    server: {
      host: "0.0.0.0", //解决“vite use `--host` to expose”
      port: 8080,
      open: false,
      hmr: true,
      proxy: {
        "/api": {
          target: "http://127.0.0.1:8088",
          changeOrigin: true,
          ws: true,
          rewrite: (path) => path.replace(/^\/api/, "")
        }
      },
      headers: {
        "Access-Control-Allow-Origin": "*" // 主应用获取子应用时跨域响应头
      }
    },
    build: {
      outDir: "dist/production"
    }
}

//main.js
import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"
import store from "./store"
import ElementPlus from "element-plus"
import zhCn from "element-plus/dist/locale/zh-cn.mjs"
import "element-plus/dist/index.css"
import * as ElementPlusIconsVue from "@element-plus/icons-vue"
import svgIcon from "./icons/index.vue"
import {
  renderWithQiankun,
  qiankunWindow
} from "vite-plugin-qiankun/dist/helper"

// const app = createApp(App)

let app
function render(props) {
  const { container } = props
  app = createApp(App)
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }
  const c = container
    ? container.querySelector("#app")
    : document.getElementById("app")
  app
    .component("svg-icon", svgIcon)
    .use(store)
    .use(router)
    .use(ElementPlus, {
      locale: zhCn
    })
    .mount(c)
}
renderWithQiankun({
  mount(props) {
    localStorage.setItem("inQianKun", qiankunWindow.__POWERED_BY_QIANKUN__)
    render(props)
  },
  bootstrap() {
    console.log("suan_ni-ui bootstrap")
  },
  unmount(props) {
    console.log("suan_ni-ui unmount")
    app.unmount()
  },
  update(props) {
    console.log("suan_ni-ui update")
    console.log(props)
  }
})
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render({})
}

//router.js
import { createRouter, createWebHistory } from "vue-router"
export const routes = []
//切记不可取localstorage存储的东西
const router = createRouter({
  history: createWebHistory(
    import.meta.env.PROD ? "/system/production/" : ""
  ),
  routes
})
console.log(import.meta.env)
export default router