Vue elementui字体图标显示问题解决方案


Posted in Javascript onAugust 18, 2020

问题如下

Vue elementui字体图标显示问题解决方案

在build/utils.js下找到

if (options.extract) {
  return ExtractTextPlugin.extract({
   use: loaders,
   fallback: 'vue-style-loader',
   publicPath: '../../'
  })
 } else {
  return ['vue-style-loader'].concat(loaders)
 }

加上

publicPath: '../../'

 

运行项目还是不行 ,Failed to decode downloaded font: http://192.168.11.110:8081/dist/static/font 路径也是对的

网上搜了很多,大部分说是后台经过maven的filter,会破坏font文件的二进制文件格式,导致前台解析出错

但是我的是运行在本地环境下,还没有进行打包部署

解决方式:

在maven文件的pom文件的build标签加入下面的

<plugin> 
  <groupId>org.apache.maven.plugins</groupId>
  <artifactId>maven-resources-plugin</artifactId> 
  <configuration> 
     <nonFilteredFileExtensions> 
       <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
       <nonFilteredFileExtension>woff</nonFilteredFileExtension> 
       <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
     </nonFilteredFileExtensions> 
   </configuration> 
</plugin>

重启项目,这样应该就可以了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 类型转换常见方法小结
May 31 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
alert和confirm功能介绍
May 21 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 #Javascript
javascript实现移动端上传图片功能
Aug 18 #Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 #Javascript
小程序实现上传视频功能
Aug 18 #Javascript
如何在selenium中使用js实现定位
Aug 18 #Javascript
vue实现移动端input上传视频、音频
Aug 18 #Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 #Javascript
You might like
php SQL之where语句生成器
2009/03/24 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
php使用正则验证中文
2016/04/06 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
layui实现数据分页功能
2019/07/27 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
React实现todolist功能
2020/12/28 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
Python学习笔记之解析json的方法分析
2017/04/21 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
python3 实现调用串口功能
2019/12/26 Python
python实现简单俄罗斯方块
2020/03/13 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
建筑施工实习自我鉴定
2013/09/19 职场文书
运动会标语
2014/06/21 职场文书
房屋租房协议书范本
2014/12/04 职场文书
先进基层党组织材料
2014/12/25 职场文书
用python自动生成日历
2021/04/24 Python