Vue的element ui的icon 不出来(显示的都是方块)是什么原因导致的

最好的陪521yyf
  • 724

image.png

package.json里面 element的版本是最新的

mian.js里面

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

image.png

浏览器控制台

image.png

在页面的使用

<template>
    <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
    </div>
    <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
         start-placeholder="开始日期" end-placeholder="结束日期" align="right">
        </el-date-picker>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    }]
                },
                value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
                value2: ''
            };
        }
    };
</script>

页面元素里面看,没有全局的字体顶替了element的字体

image.png

所有的图标都不显示,这可能是什么原因导致的呢?

回复
阅读 7k
7 个回答
高飞
  • 1
新手上路,请多包涵

看看woff esModule 是不是支持commjsimage.png

network 里面没有字体资源是吧。 那看看 icon 的 css 有问题吗。

因为本来就是以来字体文件去实现的功能

字体资源损坏了

看下打包配置是不是有没有忽略

用旧版的字体文件替换下试试,我记得2.12出现过同样的问题

宝石
  • 1
新手上路,请多包涵

如果你的前端打包资源放置在了诸如 sprint boot 的后端项目中,可以看看是不是后端的项目把你的 woff 的字体图标文件进行了转义,导致浏览器解析失败。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏