element打包部署出现iconfont图标乱码

项目打包部署后，使用的iconfont图标偶尔会出现乱码。网上查阅资料，原因主要有两个，一是element版本太低，不支持一些图标；二是sass编译导致的问题。
查看项目引入的element版本为2.14.1，排除版本低的原因，如果是版本低，则升级版本再尝试。再者，乱码问题并不是一直出现，存在随机性，也排除element版本低而导致。
从sass编译角度排查，element源码中使用的node-sass，而项目编译如果使用dart-sass，可能就会出现问题。在package.json中找到引入的是sass，而不是dart-sass，查阅资料说其内部依赖的是dart-sass，那么就卸载sass或dart-sass，安装node-sass和sass-loader，安装可能会失败，此时需要查询项目使用的element版本和它对应的node-sass和sass-loader版本，指定版本安装。

// 卸载
npm uninstall sass dart-sass --save

// 安装
npm install node-sass@6.0.1 sass-loader@10.2.0 --save
1
2
3
4
5

如果是在无外网环境开发或不方便更换依赖，也可以选择不将iconfont图标编译，直接引用。所以这种方式不适用于一键部署。

1. 找到node_modules\element-ui\packages\theme-chalk\src\base.scss文件，去掉icon.scss的引入
2. 在main.js引入：import 'element-ui/lib/theme-chalk/icon.css'
1
2

还有一种使用css-unicode-loader.js的方式（不知道是不是因为项目已经卸载了sass的缘故，引入报错，暂作记录备份）
如果使用vue-cli4+和scss(sass)

if use vue-cli 4+ and scss(sass), add the loader in the vue config file .

// vue.config.js
module.exports = {
  configureWebpack: config => {
    const sassLoader = require.resolve('sass-loader');
    config.module.rules.filter(rule => {
      return rule.test.toString().indexOf("scss") !== -1;
    })
      .forEach(rule => {
        rule.oneOf.forEach(oneOfRule => {
          const sassLoaderIndex = oneOfRule.use.findIndex(item => item.loader === sassLoader);
          oneOfRule.use.splice(sassLoaderIndex, 0,
          	{ loader: require.resolve("css-unicode-loader") });
        });
      });
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

使用webpack.config.js

if use webpack.config.js, add the loader in the config file .

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [{
          loader: "style-loader" // Creates `style` nodes from JS strings
      }, {
          loader: "css-loader" // Translates CSS into CommonJS
      }, {
          loader: "css-unicode-loader" // Convert double-byte character to unicode encoding.
      }, {
          loader: "sass-loader" // Compiles Sass to CSS
      }]
    }]
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

This loader must be before sass-loader if you used sass-loader

本地测试打包后是否乱码的方法：
将publicPath改为相对路径，打包。比如：

module.exports = {
	...
	publicPath: './',
	outputDir: 'dist',
	...
}
1
2
3
4
5
6

打包后，打开dist中的index.html，打开控制台查看Network，找到图标打包后的样式文件，查看内容是否乱码。