vue项目中接入vite项目的qiankun微服务

最新推荐文章于 2024-07-17 08:38:10 发布

摆烂吧小李

最新推荐文章于 2024-07-17 08:38:10 发布

阅读量469

点赞数 1

分类专栏： vue3 vite 文章标签： vue.js 微服务 javascript

本文链接：https://blog.csdn.net/weixin_49684489/article/details/129067338

版权

vue3 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

vite

1 篇文章 0 订阅

订阅专栏

qiankubn

首先在主应用里安装qiankun

npm i qiankun -S

主应用 main.js 里注册微应用

import { registerMicroApps } from 'qiankun';

// 注册子应用;
registerMicroApps([
  {
    name: 'LsMaintenance',
    entry:process.env.NODE_ENV === 'production' ? '/****/' : '子应用的地址',
    container: '#order-container',
    activeRule: '/LsMaintenance',
    props: {
      store,
      router: router,
    },
  },
]);

props 传给子应用的值

app.vue(在合适的地方) 放入子容器并启动

<div id="order-container"></div>
onMounted(() => {
  if (!window.qiankunStarted) {
    window.qiankunStarted = true;
    start();
  }
});

vite-plugin-qiankun

子应用不需要下载qiankun.js；
因现在qiankun暂不支持vite所以我们可以用社区开发的 vite-plugin-qiankun
npm i vite-plugin-qiankun -S

配置子应用 main.js

import { qiankunWindow, renderWithQiankun } from 'vite-plugin-qiankun/dist/helper';
let instance = null;

function render(props = {}) {
  const { container } = props;
  const ShareStore = props.store //主应用传过来的store;
  const ShareRouter = props.router //主应用传过来的router;
  // Vue.prototype.$ShareStore = ShareStore.state.value;
  Vue.prototype.$ShareRouter = ShareRouter;
  if (ShareStore) {
    Vue.prototype.$ShareStore = ShareStore.state.value;
  } else {
    Vue.prototype.$ShareStore = {
      app: {},
    };
  }

  instance = new Vue({
    pinia: ShareStore,
    router,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}

renderWithQiankun({
  // 加载微应用
  mount(props) {
    console.log('--mount,复用项目');
    render(props);
  },
  // 启动微应用
  bootstrap() {
    console.log('--bootstrap');
  },
  // 卸载微应用
  unmount() {
    // console.log('--unmount');
    instance.$destroy();
    instance = null;
  },
});

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

配置子应用 router.js

import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
const createRouter = () =>
  new VueRouter({
    mode: 'history', // if use history mode, require service support
    base: qiankunWindow.__POWERED_BY_QIANKUN__ ? '/LsMaintenance' : '',
    routes: [
      {
        path: '/',
        name: 'home',
        component: () => import('../views/HomeView.vue'),
      },
     
    ],
  });

const router = createRouter();

export default router;

配置子应用 vite.config.js

import qiankun from "vite-plugin-qiankun";

export default defineConfig({
  plugins: [
    vue(),
    qiankun('LsMaintenance', {
      useDevMode: true
    })
  ],
    server: {
      port: 9000,
      headers: {
          'Access-Control-Allow-Origin': '*'
      }
  },
})