欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-01 07:49:47
...

公司项目要求兼容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线上无法正常显示,本地调试可以问题解决
  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. 再次打包发布线上可以看到引入文件如下:Vue3使用element-Icons在部分IE11,IE10线上无法正常显示,本地调试可以问题解决

 可以正常显示了!