此系列均为工作或生活中遇到的各种bug，为记录bug而生的，不希望其他人因为这些bug而纠结

iconfont图标打包消失

背景介绍

前一段时间刚接了一个项目是一个演示的demo可视化项目，相对还是比较简单的，并且公司前期为了节约开发时间，特意做了一个通用的项目模板，架子基本都是搭建好的，只需要根据项目需求来进行细节修改

问题描述

项目开发过程中，领导想要看到每天的进度，于是就就代码打包部署到了服务器中，部署上去时候发现icon图标要么就变成了空白的，要么就变成其他图标，如下图所示

正常显示的图标应该为下图的样子因为项目是还在开发过程中部署的，有些图标还没来得及更换但本地的图标和打包后的图标严重不符合

解决方法

看到这样，我第一反应是两个iconfont图标库冲突导致的，此项目用到了两个图标库，一个是项目前我自己创建的图标库，另一个是为节约开发时间，UI帮助我们找的iconfont图标库。所以第一时间以为是冲突导致的，后面发现解决冲突后，这块就不具体讲了这些图标就都变成空白了，于是就怀疑打包过程中并没有打包上这些icon font文件，从而导致的字体图标消失，在看了打包文件后也是证实了猜想的这一点。因为用的是统一的模板搭建的项目，所以我又试了一下直接拉架子然后打包，并看一下是不是项目架子的问题，几分钟后发现项目的架子并没有问题，打包的文件都带有icon font文件，在换了icon font的cdn之后打包就不见了，这个问题确实奇怪，只是换了cdn，并且cdn链接也是可以进入icon font文件内的，于是我尝试着在项目中的main.js文件中直接导入cdn，打包后发现还是不可以，再次尝试在项目的的App.vue文件中按照class方式导入cdn，再次尝试打包部署，发现这一次的打包文件中就有了icon font文件的cdn路径，如下图

再次尝试部署服务器，发现图标消失问题解决，

总结反思

虽然这个问题很简单，但是自己感觉其实还是找了很长时间的，不过好在总归问题得到了解决~~~