elementui生产环境图标加载时偶而乱码
elementui 打包后图标加载偶尔会乱码
- preface
- 错误现象
- 猜想
- 解决方案
- 1. elementui 源码使用的是 node-sass
- 2. 我本地的 是 dart-sass
- 3. 查看了 打包后的css 文件
- 4. 卸载 dart-sass
- 5. 打包后的 css
preface
最近在 使用element UI 写项目， 项目在生产环境运行了一段时间后，页面刷新偶尔会出现 （搜索，箭头。。。）各种图标乱码情况。
- 使用的是 elementui@2.13.0
- 打包方式
main.js 引入 element...scc文件（非 cdn,因为我需要更换主题色）
解决办法： 用 node-sass 打包，不要使用 dart-sass
错误现象
通过下面的图片可以看出 图标显示问题很严重啊
下面这句话可以不看。
- 我之前还遇到 一个案例是 文字都显示错误了，当然是在一个同事的mac 上，我远程过去后， 查看 dom 元素，发现dom中自动添加了其他标签。最后我通过在 https://codepen.io/ 测试 elementui 该组件是否会产生同样的问题。
- 最终确定 是我们的页面有问题，仔细看了页面 又些文字变成了 繁体字
- 很明显google 的翻译插件问题嘛
- 哈哈， 关闭了 实时翻译插件就好了
猜想
这里可直接跳过去
可能是 woff 字体文件 没有 加载成功
通过控制台查看， woff 字体确实是加载成功的。
我又猜想 woff 字体文件加载 太慢了， 导致样式没有显示出来（后来我否定了，woff 的加载肯定是 阻塞 css tree 构建的， 因为之前我有个项目 引入了平方字体(大约 10多M )，最后渲染特别慢。
解决方案
cdn 引入方案肯定是没有问题的， 但是我不能使用，所以从一个开始我就去除了这个 方案，作为备选方案。
论坛上看了，有人说 sass 编译的问题。 我就进行了如下操作
1. elementui 源码使用的是 node-sass
猜测 dart-sass ,node-sass，或者版本号问题。
2. 我本地的 是 dart-sass
很显然， 问题应该是找到了
3. 查看了 打包后的css 文件
下次出问题后，还是先看 源文件吧，还快些。
明显是乱码啊！！！
4. 卸载 dart-sass
npm uninstall sassnpm install node-sass -D
如果 node-sass 下载不下来，可以去网上找找教程，我下载没问题
5. 打包后的 css
哈哈，好开熏
elementui生产环境图标加载时偶而乱码相关推荐
- Linux环境变量加载的研究
我们经常遇到在linux执行某条命令时出现xxx文件没找到的问题.很多情况都不是库没有安装,而是环境变量的错误. 但是,我明明是设置了环境变量啊.所以,我对此进行了试验. 我们登录linux有很多种, ...
- （十二）运行环境（加载、性能优化、安全）【这些会了，你就可以飞了】
运行环境 运行环境 网页加载过程 加载资源的形式 加载资源的过程 渲染页面的过程 性能优化.体验优化 原则 从何入手 让加载更快 让渲染更快 安全 XSS跨站请求攻击 XXS攻击 XSS预防 XSRF ...
- 移植驱动完毕后加载时的version magic报错原因以及解决办法
History:2012-02-17 Author:yingru 移植rt3070的AP驱动到装有fedora14的PC机上时,模块编译完毕后,加载时提示invalid module format. ...
- linux如何确定共享库路径,摘录Linux下动态共享库加载时的搜索路径详解
对动态库的实际应用还不太熟悉的读者可能曾经遇到过类似"error while loading shared libraries"这样的错误,这是典型的因为需要的动态库不在动态链接器 ...
- 网络图片加载时显示loading
网页中一般都会有图片加载,但是当遇到图片较大,而网络较慢或者服务器宽带较小时,图片加载就会变慢,加载工程中图片区域会显示空白,用户体验会不太好,这时候在加载时放一个动画,可能会缓解用户等待的焦急情绪, ...
- 7.JavaScript异步加载与加载时间线
JavaScript异步加载与加载时间线 上一篇 JavaScript浅层克隆和深层克隆 下一篇 JavaScript事件处理模型 - 事件冒泡,捕获 文章目录 JavaScript异步加载与加载时间 ...
- 加载vue文件步骤_无法在重新加载时读取vue文件
我正在使用vue-pdf和vue-server-renderer . 在内部浏览页面时,它工作正常,但在重新加载时,webpack无法在vue-pdf模块中读取.vue文件 . vue-pdf/src ...
- js按钮触发网页提醒_jquery,js页面加载时自动点击触发jq按钮-Go语言中文社区
jq加载时自动执行事件需要这样写 $(function(){ $('.signinpanel').hide();//加载时,隐藏一个元素 }) jq加载页面时自动点击按钮,则 按钮 function ...
- Javascript在页面加载时的执行顺序
一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属 ...
- vue+elementui 中src动态加载图片的时候不起作用
vue+elementui 中src动态加载图片的时候不起作用 代码如下: <el-table-column align="center" label="宠物图片& ...
最新文章
- Gartner：基础设施和运营领域10大技术趋势
- Java初阶知识总结
- Eclipse4JavaEE安装SpringBoot
- 创建mysql代码实例_MySQL筹建系列之多实例_mysql
- （87）Verilog HDL：七分频设计
- Spring Boot学习总结（12）——Spring Boot Admin 2.0应用监控示例
- Struts2_HelloWorld_3
- 多思计组原理虚拟实验室_多思计算机组成原理虚拟实验室
- MDK5：正点原子stm32遇Target not created的解决方法
- Html网页设计-动漫网站设计
- 华为员工：表面光鲜 工作十年买不起房
- 批量将所有文件按照文件名中的扩展名后缀进行分类整理
- Windows注册表开机自启，右键菜单，运行的位置介绍
- Java语言List集和(详细介绍)
- 淘宝省钱_如何省钱和组装自己的电路板
- 【随笔记】Deepin20 Linux 下安装编译NGINX
- C#关键字扫盲——Sealed 密封
- poj 3208 Apocalypse Someday（数位dp）
- 重复的事情用心做！感悟
- PB加密,PBD加密,杜绝PB程序反编译，PB加密工具