客户管理系统开发定制element打包部署出现iconfont图标乱码

客户管理系统开发定制项目打包部署后，客户管理系统开发定制使用的图标偶尔会出现乱码。网上查阅资料，原因主要有两个，一是element版本太低，不支持一些图标；二是sass编译导致的问题。
查看项目引入的element版本为2.14.1，排除版本低的原因，如果是版本低，则升级版本再尝试。再者，乱码问题并不是一直出现，存在随机性，也排除element版本低而导致。
从编译角度排查，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 4+ and scss(sass), add the loader in the vue config file .

// vue.config.jsmodule.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.jsmodule.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，找到图标打包后的样式文件，查看内容是否乱码。