解决element-icon偶尔乱码的问题

vue项目中打包上线后elementUI的icon偶尔会有乱码的问题，这是这次项目中出现的，因为用的elementUI 的组件，所以在打包上线后快速刷新后会有乱码，或者直接进入项目的时候就已经是乱码的了，刷新后又好了的这种情况。

解决这个问题参照的是这位大佬提供的方法 链接地址

一：定位问题

当时发现这个问题的时候就去找了解决的方法，找到这篇文章后就认真的学习了一下。

文章中说的是这个原因引起的。

看到这里后我就去看了项目中引入的elementUI的css文件中主题色是否有变化。经过查找项目中的文件发现确实是这样的，由于ui设计稿定稿的主题色不同，所以就将当前关于elementUI组件的主题色都更换了，然后引入了scss文件。这个文件很清楚的标注了主题色的改变。

二：解决方法

找到问题就是在于主题色变化，需要用到scss变量引入了scss文件，那么就看怎么解决了，

文章中给的有解决的方法，可以具体试验一下。这位大佬文章的链接地址在这。文章写的很详细的。

其中NPM关于css-unicode-loader的地址在这里，这个表示的是webpack加载程序，用于将scss/sass/liss/css文件的中文或双字节字符串转换为unicode-char。 NPM官网中也有这个解释和具体的代码

其中vue.config.js的配置也是跟文章中的代码一样的。

configureWebpack: (config) => {
    const _filted = config.module.rules.filter(rule => {
      return rule.test.toString().indexOf("scss") !== -1;
    });
    _filted.forEach(rule => {
      rule.oneOf.forEach(oneOfRule => {
        oneOfRule.use.splice(oneOfRule.use.indexOf(require.resolve('sass-loader')), 0,
          { loader: require.resolve("css-unicode-loader")})
      })
    })
  },

三：总结

感谢这位大佬给的解决方案，解决了这个问题，同时也是学习了很多。关于elementUI的组件项目中也是在用，但是如果出现了问题，比较简单的或者之前学习处理过的有记忆的处理起来会上手一些，但是新出现的问题就得找各位大佬的文章来借鉴一下提供一下解决方法或者解决思路啦。