vue、Element-UI 图标偶发性乱码问题完美解决

一、问题描述

现象：使用若依管理系统作为开发框架。开发过程中，图标一直正常。直到打包发布到线上，页面偶发性出现图标乱码问题，再次刷新页面后，又可正常显示。

 

 

 

图标乱码

必现步骤：线上测试环境（即代码build打包发布的环境）使用F12打开调试模式，此时刷新页面，图标乱码。

查看此时代码：浏览器调试面板出现两个图标样式，一个正常，一个乱码。此时使用的是乱码的样式。

 

 

 

浏览器代码分析

 

 

 

打包后的样式文件

二、解决方案(个人建议使用方案2)

方案1：修改sass为node-sass

大多数人，包括若依开发人员也使用此方法，但我试了之后并没有解决问题。而且node-sass在国内网络环境经常在下载依赖时会出现问题。 和我一样的人直接看【方案2】。

（1）卸载sass，安装node-sass

npm uninstall sass
npm install node-sass -D

若依官方开发人员也使用此方法，代码提交记录如下：

 

 

 

 

 

 

（2）安装后还要记得替换语法。找到项目的::v-deep替换成/deep/。

 

 

 

 

 

 

代码提交记录地址：
https://gitee.com/y_project/RuoYi-Vue/commit/c6912ca1d5712d29f97600fcebe0411d5d9bd25c
https://gitee.com/y_project/RuoYi-Vue/commit/5fcf342f5a08cc7dec3bdd53445c6c5c69c52b80

 

方案2：升级sass、配置vue.config.js

（1）sass版本升级到1.39.0

 

 

 

 

 

sass版本升级到1.39.0

 

 

 

配置vue.config.js

为方便复制，代码粘贴如下：

css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          outputStyle: 'expanded'
        }
      }
    }
  },

（3）看下效果，完美解决
重新打包项目npm run build,看到原先乱码的文件dist/css/app.xxx.css不再乱码了，成功解决！

 

 

 

图标不再乱码

三、总结

方案1本人测试不成功，而且node-sass在国内网络环境有时会下载不成功，并且需要对应修改一些css代码写法，较为麻烦。
方案2实现简单，不需修改原先代码，很棒！