elementUI字体图标在https下，ie浏览器无法显示

问题描述

在HTTPS协议下，IE浏览器某些类型的电脑无法显示字体图标

解决方案

webpack打包配置中使用了url-loader，将小于固定大小（limit）的文件打包成base64的DataURL，将对woff、eot、ttf、otf的处理limit限制修改为1024 * 1000（也就是将小于1M的字体文件以base64打包到css中）

修改脚手架默认配置

{
  ...,
  chainWebpack: config => {
    // 解决字体图标丢失
    config.module
      .rule('fonts')
      .use('url-loader')
      .tap(options => {
        return {
          ...options,
          limit: 1024 * 1000 // 这个数值可以设置为很大，很大的话，打包之后的dist文件夹中就不会出现fonts目录了，因为这个时候所有的字体文件都被转成base64放到css文件中了
        }
      })
  }
  ...
}

查看font的规则

PS F:\sourceCode> vue inspect --rule fonts
/* config.module.rule('fonts') */
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
  use: [
    {
      loader: 'F:\\HK\\project\\HR-ORG-WORKFLOW\\sourceCode\\node_modules\\url-loader\\dist\\cjs.js',
      options: {
        limit: 0,
        fallback: {
          loader: 'F:\\HK\\project\\HR-ORG-WORKFLOW\\sourceCode\\node_modules\\file-loader\\dist\\cjs.js',
          options: {
            name: 'static/fonts/[name].[hash:8].[ext]'
          }
        }
      }
    }
  ]
}

原因分析

暂无