详解Vue+elementUI build打包部署后字体图标丢失问题


Posted in Javascript onJuly 13, 2020

错误描述:

Vue+elementUI  build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404

错误展现:

详解Vue+elementUI build打包部署后字体图标丢失问题

控制台报错截图

详解Vue+elementUI build打包部署后字体图标丢失问题

dom渲染展示

解决方法:

webpack module配置:(build目录下webpack.base.conf.js)

module: {
  rules: [
   ...(config.dev.useEslint ? [createLintingRule()] : []),
   {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
   }
  ]
 },

webpack utils.js 修改:(build目录下utils.js)

添加    publicPath: '../../'

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

处理结果:

详解Vue+elementUI build打包部署后字体图标丢失问题

图标显示出来了

 到此这篇关于详解Vue+elementUI build打包部署后字体图标丢失问题的文章就介绍到这了,更多相关element build打包部署字体图标丢失内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery tools系列 expose 学习
Sep 06 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
详解javascript高级定时器
Dec 31 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
js实现简易计算器功能
Oct 18 Javascript
Vue实现Layui的集成方法步骤
Apr 10 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 #Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 #Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 #Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 #Javascript
浅析JavaScript 函数防抖和节流
Jul 13 #Javascript
详解JavaScript 异步编程
Jul 13 #Javascript
javascript canvas时钟模拟器
Jul 13 #Javascript
You might like
PHP中的日期处理方法集锦
2007/01/02 PHP
详解php中反射的应用
2016/03/15 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
利用php生成验证码
2017/02/23 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
javascript常见用法总结
2014/05/22 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
Python生成随机数的方法
2014/01/14 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
Tornado 多进程实现分析详解
2018/01/12 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
Django--权限Permissions的例子
2019/08/28 Python
django创建简单的页面响应实例教程
2019/09/06 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
django框架中间件原理与用法详解
2019/12/10 Python
Python中的全局变量如何理解
2020/06/04 Python
vscode调试django项目的方法
2020/08/06 Python
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
预备党员思想汇报范文
2014/01/11 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
爱心活动计划书
2014/04/26 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
2016年安全月活动总结
2016/04/06 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android