Vue3使用element-Icons在部分IE11，IE10线上无法正常显示，本地调试可以问题解决

公司项目要求兼容IE10,11，项目使用的vue3 + element：

线上观察在IE11，中woff字体正常引入，但是只有在一次加载的时候才有效，刷新页面，所有icon字体都显示异常，故此考虑是否为在IE浏览器下，http（https）方式加载woff等字体文件解析有问题。

 

• 解决方案：将fonts相关文件打包时，调整为base64格式，不使用http

1. 在项目中查看fonts使用的loader一会options配置 （小于4096会打包成base64格式）
2. 在vuecofig.js中修改fonts的options配置（如）

3.  chainWebpack: config => {
       config.module
         .rule('fonts')
         .use('url-loader')
           .loader('url-loader')
           .tap(options => {
             options.limit = 0
             return options
           })
     }
   

    

4. 再次打包发布线上可以看到引入文件如下：

 可以正常显示了！