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

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MyBatis概述

三层架构 表现层&#xff1a;直接和前端交互&#xff0c;接受AJAX请求&#xff0c;返回json数据业务层&#xff1a;一是处理前端的请求&#xff0c;二是返回持久层获取的数据持久层(数据访问层)&#xff1a;直接操作数据库&#xff0c;完成CRUD&#xff0c;返回数据给业务层 …

李沐动手学习深度学习——3.2练习

以下是个人理解&#xff0c;希望进行讨论求解。 练习 1. 如果我们将权重初始化为零&#xff0c;会发生什么。算法仍然有效吗&#xff1f; 根据SGD算法公式如上&#xff0c;第一次迭代的值可知w只与b相关&#xff0c;而对于b的迭代更新&#xff0c;只是与b的初始值相关&#x…

docker中hyperf项目配置虚拟域名

在使用hyperf框架时&#xff0c;直接用了docker环境进行开发 下载镜像运行容器 docker run --name hyperf -v /data/project:/data/project -p 9501:9501 -itd -w /data/project --privileged -u root --entrypoint /bin/sh 镜像ID配置docker-compose.yml version: "3.…

也谈AIGC和ChatGPT的区别?

AIGC 和 ChatGPT 的区别 定义 AIGC (人工智能生成内容)&#xff1a;一种人工智能技术&#xff0c;用于生成类似人类的文本、图像、音频和视频等内容。ChatGPT&#xff1a;OpenAI 开发的大型语言模型&#xff0c;是 AIGC 的一种具体实现。 目的 AIGC&#xff1a;广泛用于内容…

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

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

Gin 框架简单上手

引言 Gin 是一个基于 Go 语言的 Web 框架&#xff0c;旨在提供高性能和高效的方式来构建 Web 应用程序。它简单易用&#xff0c;同时又提供了丰富的功能和灵活的扩展性。本文将带你深入学习 Gin 框架&#xff0c;从安装开始&#xff0c;逐步深入探索其各项功能&#xff0c;包括…

企业级指针仪表读数YOLOV8NANO

企业级指针仪表读数&#xff0c;采用YOLOV8NANO训练&#xff0c;检测表盘和表芯&#xff0c;得到PT模型&#xff0c;然后转换ONNX&#xff0c;让OPENCV调用。然后提取表芯区域&#xff0c;通过极坐标转换为直角坐标&#xff0c;再通过检测指针和刻度&#xff0c;换算成比例&…

Chapter 8 - 19. Congestion Management in TCP Storage Networks

Queue Depth Monitoring and Microburst Detection Queue depth monitoring and microburst detection capture the events that may cause congestion at a lower granularity but are unnoticed by other means due to long polling intervals. 队列深度监控和微爆检测可捕捉…

Ubuntu 安装 Android Studio

一. 步骤 通过以上步骤&#xff0c;可以在 Ubuntu 上成功安装 Android Studio&#xff0c;并开始进行 Android 应用程序的开发。 打开终端&#xff08;Terminal&#xff09;。 首先&#xff0c;确保你已经安装了 Java 开发工具包&#xff08;JDK&#xff09;。Android Studio …

notejs+nvm+angular+typescript.js环境 Hertzbeat 配置

D:\Program Files\nodejs\ D:\Users\Administrator\AppData\Roaming\nvm nvm命令提示 nvm arch&#xff1a;显示node是运行在32位还是64位。 nvm install <version> [arch] &#xff1a;安装node&#xff0c; version是特定版本也可以是最新稳定版本latest。 可选参…

前端-BOM和DOM的区别和用法

首先上图&#xff0c;这是整个JAVASCRIPTD 结构&#xff0c;因此我们可以得出一个关系等式 JavaScript ECMAscript BOM DOMECMAscript&#xff1a; 是一种由 ECMA国际&#xff08;前身为欧洲计算机制造商协会&#xff09;通过 ECMA-262 标准化的脚本程序设计语言&#xff0…

二分图---染色法(判断二分图),匈牙利算法(二分图的最大匹配) //概念,应用场景,判定证明,算法思路,示例

目录 二分图概念 二分图应用场景 如何判定一个图是否可以划分成二分图 证明 染色法 原理步骤 时间复杂度 算法思路 例子 匈牙利算法 概念 匈牙利使用算法前提,场景 时间复杂度 算法思路 例子 二分图概念 二分图是图论中的一个重要概念&#xff0c;指的是一个图的…

如何将算法部署于云平台

算法部署&#xff1a;指将开发完成的算法模型应用到实际的生产环境中的过程。通常包括将算法模型转换为可以在特定硬件和软件环境中运行的服务或应用程序&#xff0c;并使其能够接收输入数据&#xff0c;处理这些数据&#xff0c;并返回预测或分析结果。 要将一个离线的强化学…

Java四大引用类型

四大引用类型 从JDK 1.2版本开始&#xff0c;对象的引用被划分为4种级别&#xff0c;从而使程序能更加灵活地控制对象的生命周期。这4种级别由高到低依次为&#xff1a;强引用、软引用、弱引用和虚引用 不同的引用类型&#xff0c;主要体现的是对象不同的可达性&#xff08;r…

【vue3学习笔记】Suspense组件;vue3中的其它改变

尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 课程 P167节 《Suspense组件》笔记 想要学习suspense&#xff0c;先来了解静态组件与异步组件。 静态引入与异步引入&#xff1a; 在network中将网速调慢&#xff0c;观察在静态引入和异步引入模式下&#xff0c;两个组件的加载…

CI/CD笔记.Gitlab系列.`gitlab-ci.yml`中的头部关键字

CI/CD笔记.Gitlab系列 gitlab-ci.yml中的头部关键字 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.ne…

【MySQL】主从同步原理、分库分表

主从同步原理 1. 主从同步原理 MySQL 经常先把命令拷入硬盘的日志&#xff0c;再执行日志的命令&#xff0c;这样的好处&#xff1a; 日志的位置固定&#xff0c;拷入硬盘的开销不大&#xff1b;将命令先准备好&#xff0c;而不是边读边执行&#xff0c;性能更好&#xff0c;…

PyTorch深度学习工具箱整理总结

一、pytorch 简介 Pytorch是torch的python版本&#xff0c;是由Facebook开源的神经网络框架&#xff0c;专门针对 GPU 加速的深度神经网络&#xff08;DNN&#xff09;编程。Torch 是一个经典的对多维矩阵数据进行操作的张量&#xff08;tensor &#xff09;库&#xff0c;在机…

Docker挂载镜像到本地(日常记录)

Docker挂载镜像到本地 1、进入jar包文件夹 cd docker-publish/2、编写DockFile文件 #使用Jdk8环境作为基础镜像&#xff0c;如果镜像不在本地则会从DockerHub进行下载 #FROM openjdk:8-jdk-alpine FROM openjdk:11 #VOLUME 指定了临时文件目录为/tmp。其效果是在主机 /var/l…

如何在 Angular 中使用 NgTemplateOutlet 创建可重用组件

简介 单一职责原则是指应用程序的各个部分应该只有一个目的。遵循这个原则可以使您的 Angular 应用程序更容易测试和开发。 在 Angular 中&#xff0c;使用 NgTemplateOutlet 而不是创建特定组件&#xff0c;可以使组件在不修改组件本身的情况下轻松修改为各种用例。 在本文…