vue项目打包上线element-ui的icon偶尔乱码问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue项目打包上线element-ui的icon偶尔乱码问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue项目打包上线element-ui的icon偶尔乱码问题
线上环境偶尔会复现，
具体：

一般使用不会出现这个问题，因为一般引入的是element-ui的css文件，问题出在于为了主题色变化啊，需要用到scss变量引入了scss文件。

@import “~element-ui/packages/theme-chalk/src/index”;
而dart-sass在编译element-ui里icon伪元素的content unicode编码时会转换成对应unicode明文，所以通过伪元素来展示的图标如el-icon-arrow:before{ content: “\e6df”}，编译之后就变成了el-icon-arrow:before{ content: “”}，“”便是一个双字节字符，导致出现乱码。

解决办法
1、dart-sass替换成node-sass
2、使用dart-sass，结合使用npm库的：
https://github.com/styzhang/css-unicode-loader
具体方式：
1、yarn add css-unicode-loader --dev
2、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") });
       });
     });
   }
   //下面的css配置可以无
   css: {
       loaderOptions: {
           sass: {
               sassOptions: {
                   javascriptEnabled: true
               }
           }
       }
   }
}

完成后执行打包命令，打包文件dist/css/app.xxxx,
查看是否是icon是否正常编码，下面展示为正常，不正常–下面圈起来的就是空的或者乱码
vue项目打包上线element-ui的icon偶尔乱码问题文章来源地址https://www.toymoban.com/news/detail-415750.html