美文网首页
elementUI字体图标不显示问题

elementUI字体图标不显示问题

作者: 无尘粉笔 | 来源:发表于2020-05-13 10:41 被阅读0次

    没有使用vue-cli,引入elementUI时提示字体图标404,找不到文件,如下错误:
    在网上查了下解决办法,是因为elementUI的字体图标是.woff和.ttf格式的,在webpack的loaders中需要配置,在module:{loaders:{ }}中新增内容,如下:

    {
            test: /\.(eot|svg|ttf|woff|woff2?)$/,
            loader: 'file-loader'
    }
    

    然后通过npm安装file-loader依赖,命令如下:
    npm/cnpm install file-loader --save
    如果你足够幸运那么问题应该解决了。很不幸我就是不幸的那个,如果你也是,那么接着往下看

    所有字体图标全部显示方框。
    多方查证才发现是安装的file-loader依赖和webpack版本冲突,但是又不敢随便修改webpack的版本,于是最后采用了一个方法,将file-loader更换为url-loader,于是问题圆满解决
    附上module:{loaders:{ }}中新增的最终代码:

    {
            test: /\.(eot|svg|ttf|woff|woff2?)$/,
            loader: 'url-loader'
    }
    

    然后 npm/cnpm install url-loader --save

    相关文章

      网友评论

          本文标题:elementUI字体图标不显示问题

          本文链接:https://www.haomeiwen.com/subject/alognhtx.html