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

news2024/10/1 5:34:36

问题描述:

子应用使用的是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改为异步加载即可。

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

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

相关文章

d3dx9_43.dll如何修复?d3dx9_43.dll文件缺失的多种解决方法指南

d3dx9_43.dll如何修复?d3dx9_43.dll文件丢失是一种常见的计算机问题,它会导致运行某些软件时出现错误。本文将详尽地介绍如何修复这一问题,并对比各种方法的优缺点,以及深入解析该DLL文件的由来及其重要性。 一.多种d3dx9_43.dll修…

MAVLink 协议概述

MAVLink 是一种二进制遥测协议,专为资源受限的系统和带宽受限的链路而设计。MAVLink部署有两个主要版本:v1.0和v2.0,v2.0向后兼容(v2.0实现可以解析和发送v1.0数据包)。遥测数据流以多播设计发送,而改变系统…

Java中线程池相关的七个参数

在Java中,线程池的七个参数是指线程池的相关配置参数,用来控制线程池的行为和性能。这些参数包括: 1. 核心线程数(corePoolSize):线程池中保持的最小线程数,即使线程处于空闲状态,也…

vue3 + TS 项目中使用pinia-plugin-persistedstate持久化缓存

Vue 3和Pinia是一对非常好的组合,可以帮助你构建现代化的Vue应用程序。而pinia-plugin-persistedstate是一个用于在Pinia存储中实现状态持久化的插件。下面我将详细介绍如何在Vue 3应用程序中使用Pinia和pinia-plugin-persistedstate模块。 首先,确保你…

JavaWeb-XML

1.常见的配置文件 1.1 properties 数据库的连接就使用properties文件作为配置文件,properties文件中的配置信息是以键值对的形式存储的。 beiluo.jdbc.urljdbc:mysql://localhost:3306/beiluo beiluo.jdbc.drivercom.mysql.cj.jdbc.Driver beiluo.jdbc.usernamer…

AutoHotKey-study

目录 使用编辑器脚本注意函数解释信息调试方法键盘获取方法脚本练习 最近发现常用键盘的上下左右箭头去操作输入输出问题感觉很不是滋味,不像Linux那样,有vim的使用,就想着有没有什么方法更快捷,更方便的去使用电脑键盘&#xff0…

【开源】基于Vue和SpringBoot的社区买菜系统

项目编号: S 011 ,文末获取源码。 \color{red}{项目编号:S011,文末获取源码。} 项目编号:S011,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、系统设计2.1 功能模块设计2.1.1 数据中心模块2.1…

浅谈抄表环境对抄表质量的影响

众所周知,抄表环境对抄表质量影响是不言而喻的。不仅影响着营销“三率”,还影响着企业的社会形象。尽管,随着水表出户、物联网技术的发展,抄表环境得到很大改善,但受资金、政策、技术的制约,抄表环境问题仍…

深入了解Java Period类,对时间段的精确控制

阅读建议 嗨,伙计!刷到这篇文章咱们就是有缘人,在阅读这篇文章前我有一些建议: 本篇文章大概2900多字,预计阅读时间长需要3分钟。本篇文章的实战性、理论性较强,是一篇质量分数较高的技术干货文章&#x…

二阶变系数线性微分方程

1、变量替换法 欧拉方程 是常数&#xff0c;是已知的函数。 二阶欧拉方程 (1) 当时&#xff0c;令,则 代入&#xff08;1&#xff09;中&#xff0c; .这样就把欧拉方程&#xff0c;化成了二阶常系数非齐次微分方程 当x<0时&#xff0c;令, 例题 解:令,则 代入上面的推…

VPS服务器”性价比之王”系列:RackNerd

2023 黑五&#xff01;&#xff01;&#xff01;新 Ryzen 系列 洛杉矶dc02机房重新补货&#xff01; 支付方式&#xff1a;支付宝、PayPal、信用卡、数字货币 2023 黑五促销活动&#xff08;限量&#xff09; CPU内存硬盘(SSD)流量带宽价格(续费同价)购买链接1核768 MB15GB…

GSLB是什么?谈谈对该技术的一点理解

GSLB是什么&#xff1f;它又称为全局负载均衡&#xff0c;是主流的负载均衡类型之一。众所周知&#xff0c;负载均衡位于服务器的前面&#xff0c;负责将客户端请求路由到所有能够满足这些请求的服务器&#xff0c;同时最大限度地提高速度和资源利用率&#xff0c;并确保无任何…

acwing-Linux学习笔记

acwing-Linux课上的笔记 acwing-Linux网址 文章目录 1.1常用文件管理命令homework作业测评命令 2.1 简单的介绍tmux与vimvimhomeworktmux教程vim教程homework中的一些操作 3 shell语法概论注释变量默认变量数组expr命令read命令echo命令printf命令test命令与判断符号[]逻辑运算…

【Virtual Box】显示界面后无反应

本文记录本人在使用Virtual Box中遇到的问题 1.Virtual Box启动后无反应点击菜单栏是可用的&#xff0c;但界面里的无法操作 【解决方法】&#xff1a;以管理员身份启动virtual Box

Linux:dockerfile编写搭建tomcat练习(9)

我使用的httpyum仓库 本地使用了5个文件&#xff0c;tomcat使用的官网解压直接用的包】 Dockerfile 主配置文件 基于centos基础镜像 jdk1.8.0_91 java环境 run.sh 启动脚本 centos.repo 仓库文件 tomcat 源码包 vim Dockerfile写入FROM centos MAINTAINER ta…

Java 设计模式——备忘录模式

目录 1.概述2.结构3.案例实现3.1.“白箱”备忘录模式3.2.”黑箱”备忘录模式 4.优缺点5.使用场景 1.概述 &#xff08;1&#xff09;备忘录模式 (Memento Pattern) 又称为快照模式&#xff0c;是一种行为型设计模式&#xff0c;它提供了一种保存和恢复对象状态的机制。备忘录模…

Python-图片去重

直接上代码 # 修改一下第34行文件夹路径以及13行图片后缀名即可使用 import os from hashlib import md5def remove_duplicate_images(folder_path):image_files []duplicate_images set()# 遍历文件夹&#xff0c;找到所有 JPG 图片文件for root, dirs, files in os.walk(f…

夜莺专业版网络设备功能介绍

网络设备采集简介 网络设备的问题通常会产生较大范围的影响&#xff0c;因此采集监控网络设备是一项常见的任务。不同公司在实施网络设备采集时可能采用不同的方案&#xff0c;主要有三类&#xff1a; SNMP&#xff08;Simple Network Management Protocol&#xff09;&#x…

【源码篇】基于SpringBoot+Vue实现的在线考试系统

文章目录 系统说明技术选型成果展示账号地址及其他说明 系统说明 基于SpringBootVue实现的在线考试系统是为高校打造的一款在线考试平台。 系统功能说明 1、系统共有管理员、老师、学生三个角色&#xff0c;管理员拥有系统最高权限。 2、老师拥有考试管理、题库管理、成绩管…

⭐ Unity + ARKIT 介绍 以及 平面检测的实现

在AR插件中&#xff0c;ARKIT是比较特殊的一个&#xff0c;首先他在很多追踪上的效果要比其他的AR插件要好&#xff0c;但是只能在IOS系统设备上运行。 1.首先ARKIT在最新版Unity已经集成在AR Foundation中&#xff0c;那我们就需要ARSession 和ARSessionOrigin这两个重要组件…