乾坤子应用配置(vue3+vite)
vite 接入 需要安装 "vite-plugin-qiankun": "^1.0.15", "qiankun": "^2.10.10",
// vite.config.ts npm install vite vite-plugin-qiankun qiankun --save-dev
.env.development .env.production
开发环境读取配置文件路径修改 VITE_BASE_URL = /xxx
conf/plugins.js
// 1. 引入乾坤 import qiankun from 'vite-plugin-qiankun' // 2. composePlugins方法中添加 qiankun('vue-child', { useDevMode: true }),
重点 mainjs配置 参考
import { createApp } from 'vue' import App from './App.vue' import router from './router' // pinia 仓库 import { registerStore, useAppStore } from '@/store' let app = null import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper' const qiankunStart = () => { // 独立运行时 if (!qiankunWindow.__POWERED_BY_QIANKUN__) { initApp() } else { // 作为微应用运行 renderWithQiankun({ // 调用renderWithQiankun mount(props) { initApp() const appStore = useAppStore() appStore.TOGGLE_SHOWSTATUS('qiankun') }, bootstrap() { console.log('-- bootstrap --') }, update() { console.log('-- update --') }, unmount() { console.log('-- unmount --', app) // 卸载app app.unmount() app = null } }) } } const initApp = async() => { app = createApp(App) // 使用路由 app.use(router) // 状态管理Store注册 registerStore(app) await router.isReady() app.mount('#app') } qiankunStart()
修改路由配置
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper' const base = qiankunWindow.__POWERED_BY_QIANKUN__ ? `powersi-portal/powersi-drg-vue3` : 'powersi-drg-vue3' const router = createRouter({ history: createWebHistory(base), routes: constantRoutes.concat(asyncRoutes).concat(modules), scrollBehavior: () => ({ left: 0, top: 0 }) })
配置修改
base: '/powersi-drg-vue3/', //
history模式下ng配置
location /power-yb { root html/powersi-portal; index index.html index.htm; try_files $uri $uri/ /power-yb/index.html; }