vue关于生产、测试环境字体图标偶尔出现乱码问题

最近老是遇到生产、测试环境上出现字体图标乱码的问题，就去网上搜解决办法。很多说是打包方式的问题，不能用dart-sass，要用node-sass,但是我的本身就是用的node-sass,还是出现了乱码问题，有人又说是因为使用了babel-plugin-component或babel-plugin-component-scss进行按需引入的原因，我的项目中没有这两个东西，真让人头痛啊

后来看到一个博主说可能出现乱码的原因及解决方法感觉好像可行，贴出来记录一下

问题：

1. dart-sass编译时会将对应的unicode编码转换成对应unicode明文，所以通过伪元素来展示的图标如el-icon-arrow:before{ content: "\e6df"}，编译之后就变成了el-icon-arrow:before{ content: ""}，“”便是一个双字节字符，我看我的项目打包后好像也是
2. 正常情况我们会在meta标签上设置：，但这只对HTML内容解析有效，对于css内容中(外部样式表下)的双字节字符（如中文）解析并没有作用的，所以如果浏览器请求回来的css资源的HTTP响应头里的Content-Type未指明"charset=utf-8"的话，浏览器根据自身的嗅探机制来决定采用哪一种编码解析，结果就会概率出现双字节字符乱码的情况

解决方案：

1. 和后端商量下，让css资源请求的响应头的Content-Type增加"charset=utf-8"声明
2. 使用 @charset，不过这种方法我试了好久vue-cli编译后的css都没能把@charset ”UTF-8“输出，直接使用sass命令行编译是有的
3. 使用 css-unicode-loader，这个是我最近写的一个webpack loader,用来将双字节字符的伪元素内容转换成unicode编码 目前我使用的最后一种，不过因为是偶尔出现乱码的原因，我还没办法验证方案是否有效，不过打包后的代码中没有出现双节字符乱码的情况了，具体用法如下：

npm install --save-dev css-unicode-loader

if vue-cli 3+, add the loader in the vue config file .

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