qiankun引入vue3子项目实践

junner443

已于 2023-03-31 11:31:42 修改

阅读量998

点赞数

文章标签：经验分享

于 2023-03-28 09:47:48 首次发布

本文链接：https://blog.csdn.net/junner443/article/details/129809678

版权

这篇博客介绍了如何在现有项目中通过qiankun框架无缝引入vue3子服务。从创建vue3子项目、安装qiankun、配置子服务、启动和解决遇到的问题，到改造流水线实现一键发版，详细阐述了整个过程，帮助开发者理解如何在实际操作中应用qiankun。

摘要由CSDN通过智能技术生成

qiankun引入vue3子项目实践

背景

vue3优点就不再赘述了，反正就是很多(性能优化、优雅使用上ts、Composition API…），最主要的能使用前沿的技术架构，这是每一位技术的执念。

怎么样无感知切换到使用vue3开发成了当前的问题，前段时间有同事提出了可以通过qiankun嵌入，okokok！那就是它了，在我们老项目中通过qiankun引入一个vue3子服务来写业务模块，同时新老项目也可以通过qiankun内置方式来进行数据交互，如下图：

准备工作

创建vue3子服务项目

这里我们使用webpack方式创建,暂时不要使用vite,因为vite暂时不支持qiankun框架.

创建过程不在赘述,可参考:https://segmentfault.com/a/1190000039255646

创建完成之后我们新建两个路由地址，如下:

import {
    createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";

const routes: Array<RouteRecordRaw> = [
  {
   
    path: "/",
    name: "Home",
    component: Home,
  },
  {
   
    path: "/home",
    name: "Home2",
    component: Home,
  },
  {
   
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];

const router = createRouter({
   
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default {
    router, routes };

下面我们就以/home以及/about路由为例在老项目中引入。

安装

主服务安装

cnpm i qiankun

创建子服务容器

主服务增加router地址/qiankunVue3/*来承载vue3子项目，接入之后主服务所有/qiankunVue3的路由地址都将由子服务渲染。

下面代码省略了引入部分，导出的micoapp会合并到主服务的router.routes对象中

主服务增加一个routes对象：

const qiankunVue3Layout = () => import(/* webpackChunkName: "micoapp" */ '@/views/common/qiankunVue3Layout.vue')

let micoapp = [
  {
   
    path: '/qiankunVue3/*',
    name: '乾坤Vue3',
    meta: {
   
      keepAlive: false,
      isMicoApp: true
    },
    component: qiankunVue3Layout
  }
]

export default micoapp

其中新建qiankunVue3Layout.vue简写之后的代码如下，由<section id="qiankunVue3Dom" />代替<router-view>来承载子服务

// qiankunVue3Layout.vue
<template>
  <div class="myhome-wrapper" id="main">
    <!--头部-->
    <v-header v-if="showHeader"></v-header>
		<!--侧边栏-->
    <v-aside v-if="isSHowMenu"></v-aside>
    <div class=