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

Question

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

在mian.js里面

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

浏览器控制台

在页面的使用

<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的字体

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

Answer 1

看看woff esModule 是不是支持commjs

Answer 2

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

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

Answer 3

字体资源损坏了

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

请问作者，最终是怎么解决的？我遇到一个问题使用wenpack是没有问题的，但用vuecli时，遇到同样问题，请问是否需要对element 进行单独的配置？