码迷,mamicode.com
首页 > 其他好文 > 详细

vue 升级element-ui woff文件404

时间:2019-11-14 18:34:37      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:util   测试   yar   utils   webp   path   调整   src   image   

一、build文件下utils.js下增加 

publicPath:‘../../‘

技术图片

 

 二、

同样的代码环境,用yarn来安装依赖后启动运行正常,而采用npm安装依赖则有类似问题。当然,这个和yarn或者npm没有关系,肯定是环境配置的问题。经过对比发现,用yarn安装依赖后,运行的页面加载的字体文件并不是一个http请求,而是把字体文件打包成了Base64编码的文件直接嵌入到了页面当中,而采用npm搭建的环境,则发起了一个http请求,并指向了错误的地址。

这样以来就初步定位了问题,排查webpack.base.conf.js,对应的字体模块加载配置

技术图片

 

 

由于设置了limit:10000,即文件大于10KB就会直接发起http请求的方式去加载依赖,而小于10KB的文件则直接通过Base64打包嵌入到页面当中,调整该配置为100000,再次打包测试,字体图标显示正常了,初步确定,问题就在这里。虽然问题定位了,但是原因还没找到,由于采用的webpack配置是同一份,不可能出现yarn和npm安装依赖导致配置的改变,再次分析发现,npm安装搭建的环境,请求的woff文件和ttf文件,显著变大了,分别为55956B和28200B,而通过yarn搭建的环境请求的对应字体文件只有11040B和6164B,文件大小明显不同,差异巨大。

 

vue 升级element-ui woff文件404

标签:util   测试   yar   utils   webp   path   调整   src   image   

原文地址:https://www.cnblogs.com/baiyq/p/11858962.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!