微服务之qiankun主项目+子项目搭建vue2

已于 2024-08-06 10:10:09 修改
阅读量4.3k 收藏 29
点赞数 18
CC 4.0 BY-SA版权
文章标签： 微服务 vue.js javascript
于 2024-02-28 11:46:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/men_gqi/article/details/136342214

主项目vue2 、子项目vue2、vue3、

一、 下载安装"qiankun": “^2.10.13”

参考官网地址

二、 手动调用qiankun,使用vue脚手架搭建的项目

1. 主项目配置（我使用的是手动调用乾坤，在指定页面显示内容）

1. 要使用的页面中引入乾坤

<template>
  <div class="xin">
    <p> 个人项目</p>
     <keep-alive>
      <div id="baixianHome"></div>
    </keep-alive>
    <!--xinHome 为放置子项目的盒子  -->
  </div>
</template>
  
<script>
import { loadMicroApp, start } from 'qiankun';//引入手动调用方法

export default {
  name: 'XinVue2',
  data() {
    return {

    }
  },
  created() {
    this.$nextTick(() => {
      // hash模式下配置
      const getActiveRule = (hash) => (location) => location.hash.startsWith(hash);
      this.vueApp = loadMicroApp({
        name: 'qiankun-children',
        entry: '//localhost:8081/',
        container: '#xinHome',
        activeRule: getActiveRule('#/'),
      });
      //启动乾坤函数
      start({ singular: false });
    })
  },
  beforeDestroy(){
    console.log( this.vueApp.unmount({ name: 'qiankun-children' }))
    this.vueApp.unmount({ name: 'qiankun-children' });
  },
  methods: {

  }
}

2. router设置

  1. router/index.js文件配置
import Vue from 'vue'
import VueRouter from 'vue-router';
Vue.use(VueRouter)

const router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/qiankun-children/' : '/',  //使用 history模式必须配置
    mode: 'history',
    routes: [
        {
            path: '/xin',
            name: 'xin',
            component: () => import('@/views/xin-vue2/home'),
        }, {
            path: '/mq',
            name: 'mq',
            component: () => import('@/views/mq-vue2/home'),
        }
    ],
});
export default router
  1. main.js配置 引入并使用VueRouter
import VueRouter from 'vue-router';
import router from './router/index'
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
  router,
  render: h => h(App),
}).$mount('#appAdmin')
  1. 文件目录结构
    在这里插入图片描述

2. 子项目配置（我用的hash模式）

1. 在src目录下新建public-path.js文件

__webpack_public_path__ = window.__POWERED_BY_QIANKUN__
  ? window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
  : `http://localhost:8081/`; // 填写你当前子项目的实际部署地址

1. main.js 配置


import './public-path';//要放最上边
import Vue from 'vue';
import VueRouter from 'vue-router';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import store from './store';
import Home from './views/home/index.vue'

Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.use(VueRouter)
let router = null;
let instance = null;
function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
    scrollBehavior: () => ({ y: 0 }),
    routes:[
      {
        path: '/home',
        name: 'Home',
        component: Home
      }
    ],
  });

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

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
}

2. vue.config.js 配置

const { defineConfig } = require('@vue/cli-service')
const packageName = require('./package.json').name;
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${packageName}-[name]`,
      libraryTarget: 'umd',
      chunkLoadingGlobal: `webpackJsonp_${packageName}`,
      publicPath: '/'
    },
  },
})

3. 运行后使用

  1. 先运行主项目在运行子项目

  2. 首页效果
    在这里插入图片描述

  3. 进入调用乾坤页面
    地址：http://localhost:8081/xin#/
    在这里插入图片描述

  4. 使用子项目路由，进入子项目home页面
    地址：http://localhost:8081/xin#/home
    在这里插入图片描述

三、 vue2 旧项目修改成乾坤子项目

1. main.js 配置修改（添加一下）

let router = null;
let instance = null;
function render(props = {}) {
  const { container } = props;
  router = homeRoutes
  instance = new Vue({
    router,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}

// // 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
}
// 微应用中增加 update 钩子以便主应用手动更新微应用
export async function update(props) {
  render(props);
}

2. router.js 配置修改（添加一下）

在这里插入图片描述

3. 添加vue.config.js 配置

在这里插入图片描述
在这里插入图片描述

4. 运行后使用

在这里插入图片描述
在这里插入图片描述

四、 报错：

1.报错一：static/fonts/element-icons.535877f.woff:1 GET http://localhost:8080/static/fonts/element-icons.535877f.woff net::ERR_ABORTED 404 (Not Found)

static/fonts/element-icons.732389d.ttf:1 GET http://localhost:8080/static/fonts/element-icons.732389d.ttf net::ERR_ABORTED 404 (Not Found)
官网地址跳转

默认情况下沙箱可以确保单实例场景子应用之间的样式隔离，但是无法确保主应用跟子应用、或者多实例场景的子应用样式隔离。当配置为 {
strictStyleIsolation: true } 时表示开启严格的样式隔离模式。这种模式下 qiankun
会为每个微应用的容器包裹上一个 shadow dom 节点，从而确保微应用的样式不会对全局造成影响。
在这里插入图片描述

2. 子项目静态文件报错404

原因是本地调试没找到地址，需要在子项目中配置固定地址，添加如下设置就可以了，具体地址根据自己项目改
在这里插入图片描述

五、 vue3 + vite 旧项目修改成qiankun子项目

— 下载安装插件

npm i vite-plugin-qiankun 或者yarn add vite-plugin-qiankun都不成功再试试其他安装方法

— main.js文件修改

import { createApp,defineAsyncComponent } from 'vue'
import { createPinia } from 'pinia'
import {
  renderWithQiankun,
  qiankunWindow,
  QiankunProps,
} from 'vite-plugin-qiankun/dist/helper'//引入乾坤插件
import App from './App.vue'

import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/dist/index.css';

import router from './router'

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
const render = (props: QiankunProps = {}) => {
    const { container } = props
    const app2: string | Element = container?.querySelector('#app') || '#app' // 避免 id 重复导致微应用挂载失败
   
    app.use(router)
    app.use(createPinia())
    app.mount(app2)
  }

  const initQianKun = () => {
    renderWithQiankun({
      bootstrap() {
      },
      mount(props) { // 主项目传入数据
        console.log(props)
        render(props)
      },
      unmount(props) {
      },
      update(props) {
      },
    })
  }
  qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render() // 判断是否使用 qiankun

vite.config.ts文件修改

  base: "/wss", //必须和基座也就是主应用的activeRule值一致
  plugins: [
    vue(),
    vueJsx(),
    qiankun("ass", {
      useDevMode: true,
    }),
  ],

路由设置

const router = createRouter({

  history: createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/ass' : '/'),//wbs与子项目名称一样
  routes:  [
    // 质量监督台
    {
      path: '/',
      name: 'home',
      component: () => import('../views/home.vue'),
    },
    ]
  })

主项目添加使用方法

<template>
    <div>
      <p>zgj-个人项目</p>
      <keep-alive>
        <div id="wbome"></div>
      </keep-alive>
    </div>
  </template>
    
  <script>
  import { loadMicroApp, start } from 'qiankun';//引入手动调用方法
  
  export default {
    name: 'ass',//与子项目名称一样
    beforeDestroy() {
      console.log(this.vueApp)
      this.vueApp.unmount({ name: 'ass' });
    },
    created() {
      this.$nextTick(() => {
        this.vueApp = loadMicroApp({
          name: 'ass',//子项目名称
          entry: '//localhost:5173',
          container: '#wbome',
          activeRule: '/wss',//与config文件配置路由一样
        },
        //启动乾坤函数
        start({ singular: false });
      })
    },
    methods: {
    },
    beforeDestroy(){
      console.log( this.vueApp.unmount({ name: 'ass' }))
      this.vueApp.unmount({ name: 'ass' });
    },
    
  }
  
  </script>

在这里插入图片描述

该项目未上线使用，因此不知道打包后会不会有问题

vue2使用qiankun框架笔记
qq_39055970的博客
09-02 1818
本篇文章是针对vue项目巨石应用，对qiankuan框架的一份使用归纳，中间会记录一些遇到的问题和解决方案，如果喜欢自己探索的同学，也可以自行前往qiankun官网学习。同时也欢迎各位同学在评论区，说明自己遇到的问题，一同探讨。
微前端qiankun搭建vue3项目+问题汇总
weixin_40348267的博客
07-10 1623
这篇文章是关于使用 qiankun 搭建微服务的全过程及遇到的问题汇总。
【前端知识】微前端框架qiankun
wendao76的专栏
12-10 7953
Qiankun是一款由蚂蚁金服推出的微前端框架，它基于single-spa进行二次开发，旨在将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。Qiankun是一款功能强大的微前端框架，它通过将大型前端应用拆分为多个小型应用，提高了开发效率和可维护性。同时，Qiankun提供了沙箱机制，确保了微应用之间的隔离性。然而，Qiankun也存在一些局限性，如不支持多实例场景、对Vite等构建工具的支持不够友好等。因此，在选择是否使用Qiankun时，需要根据具体项目的需求和团队的技术栈进行综合考虑。
微前端（qiankun）vue2、vue3+webpack、vue3+vite的详细使用
最新发布
m0_60893808的博客
06-19 688
微前端 qiankun 是一个基于Single-SPA框架开发的、开源的微前端实现库，由蚂蚁金服（现蚂蚁集团）团队开发和维护。它的目标是为开发者提供一套简单、强大且生产可用的解决方案，帮助构建大型单页应用或聚合多个独立前端应用，无视框架限制React、Vue、Angular 等。
qiankun搭建
weixin_47886687的博客
03-23 779
新建一个文件夹。
轻松上手：基于single-spa构建qiankun微前端项目完整教程
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
05-25 722
qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
微前端框架之乾坤【qiankun】 vue3+vite+qiankun（手把手搭建版）
热门推荐
m0_51400948的博客
07-17 1万+
简介:qiankun是一种微前端框架，可以将多个前端应用集成为一个整体。每个子应用可以使用不同的框架和技术栈，它们之间可以相互独立开发和部署,qiankun提供了一套完整的生命周期函数和通信机制，可以让不同的子应用之间进行跨框架和跨域的通信和交互。
从0到1构建一个qiankun项目
Gorgio_Liu的博客
05-15 1467
本教程适合刚接触qiankun的新人，介绍了如何从0构建一个qiankun项目 1、首先创建一个主应用 主应用不限技术栈，react或者vue都可以，只需要提供一个容器DOM，然后注册微应用并start开始 先安装qiankun： yarn add qiankun // 或者 npm i qiankun -S 我是以react作为主应用的，首先注册微应用并启动。 // 在主应用的src下的index.js 里面注册微应用并启动 import React from 'react'; impo
qiankun-template:基于qiankun搭建的前端微服务项目
05-03
基于qiankun搭建的前端微服务项目 qiankun 项目实际搭建， 及各种微应用流行框架技术 的配置; vue2.x vue3.x react16 umi2 + dva umi3 + dva 初衷：自己当时摸索qiankun构建项目时，问题百出， 特别是umi2 及 umi3，...
基于qiankun+vue-elment-admin打造微服务使用说明v.1.01
08-03
【基于 qiankun+vue-element-admin 打造微服务使用说明 v.1.01】 在当前数字化时代，微服务架构已经成为企业级应用开发的重要趋势。本文将详细介绍如何利用 qiankun 和 vue-element-admin 结合，构建一个高效的...
前端微服务-qiankun从0到1搭建（主要核心点）以及需要注意的地方
qq_41709082的博客
12-13 2953
前端微服务-qiankun从0到1搭建（主要核心点）以及需要注意的地方
微前端完整vue实例-乾坤【qiankun】
01-16
功能说明： 1.此实例包含有一个`qiankun-main`主应用和`qiankun-vue-child`子应用。【可以包含若干个子应用，这里只建立一个vue子应用进行演示】 2.主应用跨域访问子应用系统。 3.无node_modules，执行npm install即可。 更新时间：2021-03-26
乾坤qiankun搭建前端微服务
qq_43692768的博客
08-19 1435
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
基于vue2的qiankun微前端基本配置具体操作及代码
chaizepeng的博客
06-04 1377
基于vue2项目引入qiankun微前端，改造前端项目为微服务项目。
qiankun项目搭建实战（以Vue项目为例）
ccq的博客
03-16 1541
video src=“C:\Users\28380\Desktop\QQ录屏20240316195148.mp4"style=” width:500px;height:800px">tiveRule下的entry下跑的子应用界面渲染到container容器里（此容器我们之前写在了App.vue）QQ录屏20240316195148。
微前端 qiankun搭建示例
dawnli1014的博客
04-27 906
1.准备 安装vue-cli3及以上
vue2使用qiankun微前端（跟着步骤走可实现）
请叫我欧皇！的博客
01-16 7351
比如现在的vue项目，是一个整体之后包含了多个模块（路由），之后多人开发的时候合并代码可能会造成代码冲突，打包也是全部代码一起打包。微前端解决了这个问题，由一个主应用程序（也就是基座）之后连接多个单独的子应用程序，每个子应用程序都是单独的，你用vue写商品管理，他用react写物流管理等都可以，不同的模块可以由不同的技术栈写。打包也是单独打包。比较方便。
qiankun-框架搭建
qq_45345113的博客
12-22 1355
qiankun微前端框架积累，框架搭建
项目搭建使用qiankun（乾坤），入门篇，以及遇到的坑与解决
weixin_41422591的博客
11-24 8190
项目引入qiankun(乾坤)，入门级保姆级教程以及遇到的坑
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大白菜1号

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值