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

主项目使用history,子项目使用hash模式

  • 1. 下载安装"qiankun": "^2.10.13"
  • 2. 手动调用qiankun,使用vue脚手架搭建的项目
    • 1. 主项目配置(我使用的是手动调用乾坤,在指定页面显示内容)
      • 1. 要使用的页面中引入乾坤
      • 2. router设置
    • 2. 子项目配置(我用的hash模式)
      • 1. 在src目录下新建public-path.js文件
      • 1. main.js 配置
      • 2. vue.config.js 配置
    • 3. 运行后使用
  • 3. 手动调用qiankun,子项目是存在的旧项目修改
      • 1. main.js 配置修改(添加一下)
      • 2. router.js 配置修改(添加一下)
      • 3. 添加vue.config.js 配置
      • 4. 运行后使用
  • 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)
  • 该项目未上线使用,因此不知道打包后会不会有问题

1. 下载安装"qiankun": “^2.10.13”

参考官网地址

2. 手动调用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
    在这里插入图片描述

3. 手动调用qiankun,子项目是存在的旧项目修改

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. 运行后使用

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

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 节点,从而确保微应用的样式不会对全局造成影响。
在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/415668.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯备战刷题three(自用)

1.合法日期 #include <iostream> #include <map> #include <string> using namespace std; int main() {map<string,int>mp;int days[13]{0,31,28,31,30,31,30,31,31,30,31,30,31};for(int i1;i<12;i){for(int j1;j<days[i];j){string sto_strin…

Word | 论文使用 Springer LNICST 工具包进行格式化

目录 Step1&#xff1a;下载 Springer LNICST 工具包 Step2&#xff1a;导入宏文件 Step3&#xff1a;处理导入失败&#xff08;大概意思是这个宏不安全&#xff09; Step4&#xff1a;导入成功并使用 Step1&#xff1a;下载 Springer LNICST 工具包 会议官网的 SUBMISSIO…

合唱队形洛谷

这题的状态转移方程为dp[i]max(dp[i]&#xff0c;dp[j]1) 因而可以有代码 #include<iostream> #include<algorithm> using namespace std; int arr[102][2]; int a[102]; int main() { int n; cin >> n; for (int i 1; i < n; i) { cin >>…

1、docker入门

文章目录 1、tocker简介2、tocker的安装&环境配置2、配置阿里云镜像3、基本命令1、镜像命令2、docker基本命令3、镜像基本命令4、Docker 容器常用命令 1、tocker简介 新一代的虚拟化技术 2、tocker的安装&环境配置 uname -r1、首先查看liunx的内核 yum update -y2、更…

selenium-激活pycharm,以及在pycharm中使用selenium时标红报错问题处理

激活pycharm&#xff1a;http://idea.955code.com/ 01 pycharm中导入selenium报错 现象: pycharm中输入from selenium import webdriver, selenium标红 原因1: pycharm使用的虚拟环境中没有安装selenium&#xff1a; 解决方法: 在pycharm中通过设置或terminal面板重新安装s…

VR元宇宙的概念|VR体验店加盟|虚拟现实设备销售

VR元宇宙是一个结合了虚拟现实&#xff08;Virtual Reality&#xff09;和增强现实&#xff08;Augmented Reality&#xff09;等技术的概念&#xff0c;代表着一个虚拟的多维度世界。它是一个由数字化的空间构成的虚拟环境&#xff0c;可以通过虚拟现实设备进行交互和探索。 元…

本届挑战赛季军方案:基于图网络及LLM AGENT的微服务系统异常检测和根因定位方法

aiboco团队荣获本届挑战赛季军。该团队来自亿阳信通。 方案介绍 本届挑战赛采用开放式赛题&#xff0c;基于建行云龙舟运维平台的稳定性工具和多维监控系统&#xff0c;模拟大型的生活服务APP的生产环境&#xff0c;提供端到端的全链路的日志、指标和调用链数据。参赛队伍在组…

Linux系统——LAMP架构

目录 一、LAMP架构组成 1.LAMP定义 2.各组件的主要作用 3.CGI和FastCGI 3.1CGI 3.3CGI和FastCGI比较 4.PHP 4.1PHP简介 4.2PHP的Opcode语言 4.3PHP设置 二、LAMP架构实现 1.编译安装Apache httpd服务 2.编译安装Mysql 3.编译安装PHP 4.安装论坛 5.搭建博客 W…

spring boot 整合 minio存储 【使用篇】

zi导入依赖 <!--minio--><dependency><groupId>io.minio</groupId><artifactId>minio</artifactId><version>8.0.3</version></dependency> yml配置&#xff08;默认配置&#xff09; spring:# 配置文件上传大小限制s…

LNMP 架构

环境准备&#xff1a;lnmp 需要安装 nginx mysql php 论坛/博客 软件 使用LNMP架构搭建 论坛 1. 关闭防火墙和和核心防护 systemctl disable --now firewalld setenforce 0 2. 编译安装 nginx 安装依赖包 yum -y install pcre-devel zlib-devel gcc gcc-c make 创建…

The dependencies of some of the beans in the application context form a cycle

1. 场景 项目启动报错如下&#xff1a; 翻译描述信息&#xff1a;应用程序上下文中某些bean的依赖关系形成一个循环 解释报错原因&#xff1a; 图中长方形指示的箭头代表了注入依赖的方向&#xff0c;marketSymbolServiceImpl注入了ownCurrencySettingService&#xff0c;own…

4_相机透镜畸变

理论上讲&#xff0c;是可能定义一种透镜而不引入任何畸变的。然而现实世界没有完美的透镜。这主要是制造上的原因&#xff0c;因为制作一个“球形”透镜比制作一个数学上理想的透镜更容易。而且从机械方面也很难把透镜和成像仪保持平行。下面主要描述两种主要的透镜畸变并为他…

亚马逊自养号测评:如何安全搭建环境,有效规避风险

要在亚马逊上进行自养号测评&#xff0c;构建一个真实的国外环境至关重要。这包括模拟国外的服务器、IP地址、浏览器环境&#xff0c;甚至支付方式&#xff0c;以创建一个完整的国际操作环境。这样的环境能让我们自由注册、养号并下单&#xff0c;确保所有操作均符合国际规范。…

【QT+QGIS跨平台编译】之五十五:【QGIS_CORE跨平台编译】—【qgsmeshcalcparser.cpp生成】

文章目录 一、Bison二、生成来源三、构建过程一、Bison GNU Bison 是一个通用的解析器生成器,它可以将注释的无上下文语法转换为使用 LALR (1) 解析表的确定性 LR 或广义 LR (GLR) 解析器。Bison 还可以生成 IELR (1) 或规范 LR (1) 解析表。一旦您熟练使用 Bison,您可以使用…

观成科技:加密C2框架Covenant流量分析

工具介绍 Covenant是一个基于.NET的开源C2服务器&#xff0c;可以通过HTTP/HTTPS 控制Covenant agent&#xff0c;从而实现对目标的远程控制。Covenant agent在与C2通信时&#xff0c;使用base64/AES加密载荷的HTTP隧道构建加密通道。亦可选择使用SSL/TLS标准加密协议&#xf…

77. 组合(力扣LeetCode)

文章目录 77. 组合题目描述回溯算法组合问题的剪枝操作 77. 组合 题目描述 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;n 4, k 2 输出&#xff1a; [ [2,4], [3,4],…

搭建LNMP环境并配置个人博客系统

LNMP是Linux&#xff08;操作系统&#xff09;、Nginx&#xff08;Web服务器&#xff09;、MySQL&#xff08;数据库&#xff09;和PHP&#xff08;脚本解释器&#xff09;的组合&#xff0c;常用于部署高性能的动态网站&#xff0c;如WordPress等博客平台 一、安装Linux操作系…

运用ETL工具快速拉通“有成财务”

如何运用ETL工具拉取“有成财务”数据并保存到数据库&#xff1f; ETLCloud 是一个数据集成平台&#xff0c;它提供了实时数据处理、抽取、转换、加载以及变更数据捕获&#xff08;CDC&#xff09;等功能。这个平台致力于简化和自动化企业级的数据同步与传输任务&#xff0c;并…

如何恢复数据?5个实用数据恢复方法!

亲爱的朋友们&#xff0c;你是否也有过这样的经历&#xff0c;电脑里的数据突然消失&#xff0c;让你手足无措&#xff1f;别担心&#xff0c;今天我就来教你如何恢复数据&#xff0c;让你不再为数据丢失而烦恼。 首先&#xff0c;我们需要了解数据丢失的原因。可能是你不小心…

华为云磁盘挂载

华为云磁盘挂载 磁盘挂载情况 fdisk -l 2. 查看当前分区情况 df -h 3.给新硬盘添加新分区 fdisk /dev/vdb 4.分区完成&#xff0c;查询所有设备的文件系统类型 blkid 发现新分区并没有文件系统类型&#xff08;type为文件系统具体类型&#xff0c;有ext3,ext4,xfs,iso9660等…