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格式)Vue3使用element-Icons在部分IE11,IE10线上无法正常显示,本地调试可以问题解决_第1张图片
  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. 再次打包发布线上可以看到引入文件如下:

 可以正常显示了!

你可能感兴趣的:(Vue,Element-icons)