当前位置: 首页 > news >正文

qiankun: 关于ElementUI字体图标加载不出来的问题

问题描述:

子应用使用的是vue+elementUI,在项目main.js中需要引入elementUI的样式文件。elementUI的样式文件中有字体文件的引用,是以相对路径的形式写在css文件中的,

本来独立部署项目访问是没问题的,问题出现在以qiankun微服务的方式嵌入到主应用中时,路径就不能在以相对路径来显示了,否则就会显示404。

问题分析:

首先vue项目在webpack打包时会使用extract-text-webpack-plugin这个插件来抽离js文件中的css作为一个单独的css文件,qiankun对于子应用css的文件处理是将css文件的内容以style的方式插入到dom中。

独立访问子应用时,访问的是css文件

 以微应用方式嵌入时,会将css文件的内容直接嵌入到style标签

这个时候的字体文件引用是相对路径

 比如我的子应用部署在a.com/bbb,主应用部署在a.com/aaa,独立访问子应用时,字体文件的路径就是a.com/bbb/static/fonts/XXX.wofff(能找到资源),嵌入主应用后访问的路径就是a.com/aaa/static/fonts/XXX.woff(找不到资源),这个时候就会报404错误。

qiankun官方文档上有提到可以设置运行时publicPath来解决静态资源的404问题,但是对于css文件内的路径是不行的。

解决方案

1.在子应用打包时,提取css文件的时候,将publicPath路径写为绝对路径。缺点是部署到不同环境时要手动去修改。

2.在子应用打包的时候,不在提取css到独立的文件中。缺点是会导致js文件变大

 因为在打包时,对于字体文件是通过url-loader进行解析的,对于超过设置规定大小的文件,默认会改为通过file-loader进行解析,file-loader的设置项中publicPath有__webpack_public_path__这个默认值,配合使用webpack运行时publicPath设置即可。

file-loader的publicPath属性说明: 

 使用qiankun官方的解决办法

更进一步,如果不提取css到独立文件,那么css都会被打包到js文件中,会导致文件变大。我们只是需要解决elementUI的字体文件引用问题,其实只涉及到elementUI的css文件,即我们只是不希望elementUI的这部分css被提取出去。

extract-text-webpack-plugin插件提供了一个allChunk设置:

allChunks:当为false的时候,只会提取初始化的时候引入的css,当allChunks属性为true时,会把异步引入的css也提取出来。

所以我们可以将allChunks设置为false,再将css以异步的方式引入就可以达到我们需要的效果。

异步引入css文件,只需将main.js中的css引入放到App.vue中,再将App.vue改为异步加载即可。

相关文章:

qiankun: 关于ElementUI字体图标加载不出来的问题

问题描述: 子应用使用的是vueelementUI,在项目main.js中需要引入elementUI的样式文件。elementUI的样式文件中有字体文件的引用,是以相对路径的形式写在css文件中的, 本来独立部署项目访问是没问题的,问题出现在以qi…...

【智能家居】四、网络服务器线程控制功能点

网络控制 网络线程控制功能点代码 inputCommand.h(输入控制指令)socketControl.c(socket网络控制指令)main.c(主函数)编译运行结果 网络控制 Linux网络编程 “网络控制”(Network Control&a…...

localForage使用 IndexedDB / WebSQL存储

一、什么是 localForage 当我们的存储量比较大的时候,我们一定会想到我们的 indexedDB,让我们在浏览器中也可以 使用数据库这种形式来玩转本地化存储,然而 indexedDB 的使用是比较繁琐而复杂的, 有一定的学习成本,但 …...

Hdoop学习笔记(HDP)-Part.03 资源规划

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …...

SQL -高阶3

zstarling 字符串拼接与类型转换最大,最小值,提取日期部分的数值日期截断 字符串拼接与类型转换 新语法SQL delete from public.basiclaw_qr_staff_ac ct where batch_date || data_dt || :: date and biz_line || biz_line || ;详解 该 SQL 语句…...

HarmonyOS4.0系列——03、声明式UI、链式编程、事件方法、以及自定义组件简单案例

HarmonyOS4.0系列——03、声明式UI、链式编程、事件方法、以及自定义组件简单案例 声明式 UI ArkTS以声明方式组合和扩展组件来描述应用程序的UI,同时还提供了基本的属性、事件和子组件配置方法,帮助开发者实现应用交互逻辑。 如果组件的接口定义没有包…...

播放器开发(六):音频帧处理并用SDL播放

目录 学习课题:逐步构建开发播放器【QT5 FFmpeg6 SDL2】 步骤 AudioOutPut模块 1、初始化【分配缓存、读取信息】 2、开始线程工作【从队列读帧->重采样->SDL回调->写入音频播放数据->SDL进行播放】 主要代码 分配缓存 // 对于样本队列 av_audio_…...

Qt 问题记录

问题记录 运行时出现的问题 运行出现的warning QWidget::repaint: Recursive repaint detected在paintEvent中使用painter绘制了线段、图片,移动了QWidget,加入了下面代码导致的 QApplication::processEvents();屏蔽后没有出现该warning QApplicati…...

Go 语言真正有什么用处?

在其十几年的发展过程中,Google 的Go 编程语言已经从 alpha 极客的好奇心发展成为世界上一些最重要的云原生软件项目背后经过考验的编程语言。 为什么Docker、Kubernetes等项目的开发者会选择 Go ?Go 的定义特征是什么?它与其他编程语言有何…...

贪心 55. 跳跃游戏 45.跳跃游戏 II

55. 跳跃游戏 题目: 给定非负数组,初始位置在数组第一格,数组值是可以选择的最大跳跃步数,判断能不能达到数组末尾。 示例 1: * 输入: [2,3,1,1,4] * 输出: true * 解释: 我们可以先跳 1 步,从位置 0 到达 位置 1,…...

为XiunoBBS4.0开启redis缓存且支持密码验证

修改模块文件1 xiunoPHP/cache_redis.class.php: <?phpclass cache_redis {public $conf array();public $link NULL;public $cachepre ;public $errno 0;public $errstr ;public function __construct($conf array()) {if(!extension_loaded(Redis)) {return $thi…...

手把手教你写一个Shell脚本部署你的服务

我们都知道&#xff0c;在开发的过程中&#xff0c;有很多部署自己微服务的方式&#xff0c;其中有各种各样的不同操作&#xff0c;比如使用 docker 打包为镜像的方式&#xff0c;还有基础使用 jar 包的方式进行部署&#xff0c;但是呢&#xff1f;使用 jar 包部署&#xff0c;…...

银行数字化产品方案

在互联网及金融科技公司快速发展的时代背景下&#xff0c;银行客户普遍都意识到了自己在客户体验、客户洞察、产品服务方面受到的来自互联网的挑战 。为了更好地面对各方面的挑战&#xff0c;传统的业务模式必须革新。传统银行都在积极进行数字化转型。同时&#xff0c;也要面对…...

C# datagridview控件 绑定数据库中表中数据的方式-3

1.如下图所示&#xff0c;为数据库中的一张表结构&#xff0c;注意该表中共有11个字段 2.首先在窗体后台代码中拖入一个datagridview控件&#xff0c;并在窗体加载时&#xff0c;给datagridview控件添加列&#xff0c;添加的方式如下所示&#xff1a;请注意&#xff0c;每个列…...

Amazon CodeWhisperer 正式发布可免费供个人使用

文章作者&#xff1a;sunny 亚马逊云科技日前推出了实时 AI 编程助手 Amazon CodeWhisperer&#xff0c;包括个人套餐和专业套餐&#xff0c;所有开发人员均可免费使用个人套餐。Amazon CodeWhisperer 让开发人员能够保持专注、高效&#xff0c;帮助他们快速、安全地编写代码&a…...

el-table根据返回数据回显选择复选框

接口给你返回一个集合&#xff0c;然后如果这个集合里面的status2&#xff0c;就把这一行的复选框给选中 注意&#xff1a; 绑定的ref :row-key"getRowKeys" this.$refs.multiTableInst.toggleRowSelection(this.list[i], true); <el-table :data"list"…...

代码随想录算法训练营第四十二天 _ 动态规划_01背包问题。

学习目标&#xff1a; 动态规划五部曲&#xff1a; ① 确定dp[i]的含义 ② 求递推公式 ③ dp数组如何初始化 ④ 确定遍历顺序 ⑤ 打印递归数组 ---- 调试 引用自代码随想录&#xff01; 60天训练营打卡计划&#xff01; 学习内容&#xff1a; 二维数组处理01背包问题 听起来…...

会话 cookie 及隐私的那些事

什么是会话 Cookie? 会话 Cookie 的概念非常简单。 会话 Cookie,也称为临时 Cookie 或内存 Cookie,是网站在浏览会话期间存储在用户计算机或设备上的小数据片段。 它是由网站生成并由您的浏览器存储和使用的多种 Cookie 之一。 常规 Cookie 或“持久”Cookie 是通常在您的…...

前端知识笔记(二十九)———MySQL通配符和正则表达式

一、通配符 1.% 匹配0&#xff0c;1&#xff0c;多个字符&#xff0c;但不匹配NULL 2._ 匹配单个字符 3.[charlist] 匹配字符列中的任何单一字符 4.[^charlist] 或 [!charlist] 匹配不在字符列中的任何单一字符 二、正则表达式 通配符的LIKE替换为REGEXP LIKE 匹配整个列&…...

C#网络编程(System.Net.Sockets命名空间)

目录 一、Socket类 1.示例源码 2.生成效果 二、TcpClient类和TcpListener类 1.示例源码 2.生成效果 三、UdpClient类 1.示例源码 2.生成效果 System.Net.Sockets命名空间主要提供制作Sockets网络应用程序的相关类&#xff0c;其中Socket类、TcpClient类、TcpListener类…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

MinIO Docker 部署:仅开放一个端口

MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...