标签：显示 小方块 Element 问题 limit 引入 ui 打包 图标

一、问题如下

　　vue前端项目引入element-ui框架后，本地运行图标正常显示，但打包部署后部分图标不显示。

二、问题解决

　　1.问题分析

　　由于本地运行时图标可以正常显示且在打包部署后部分图标也能够正常显示，说明dev和build的配置引用路径应该是没有问题。

　　从部分图标依旧可以正常显示来看，问题应该出在这部分图标和无法显示图标的差异上，找到引入外部文件的规则。

　　webpack.base.conf.js配置文件中的module.exports下module的rules,其中woff格式引入如下：

　　这里的limit配置项会指定文件大小，小于limit的图片无法生成图片并以base64格式被引入，大于limit的图片将以url加载。

　　无法正常显示的部分图标可能是因为limit大小限制，调整为100000后重新打包部署。

　　2.处理结果：

　　注：目前配置大小限制、外部文件引入路径和框架版本问题都有可能引起图标不显示，所以具体情况还得具体分析，此处只是其中一种。

标签：显示,小方块,Element,问题,limit,引入,ui,打包,图标
来源： https://www.cnblogs.com/guobin-/p/16288255.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。