webpack在调试阶段时字体，图标显示正常，在npm run build 发布打包版本在服务端访问时发现里面icon不显示，调试发现访问路径不对

1.在本地访问显示效果

image.png

发现访问路径多了两层目录访问路径不对，应该找到文字图标对应的路径修改指定文件目录下

2.打包后生成的dist文件目录


3.解决方法

找到css文件夹里面的样式文件，里面为压缩文件，在编辑器里面格式化一下代码

image.png

@font-face {
    font-family: Ionicons;
    src: url(static/css/ionicons.2c2ae06.eot);
    src: url(static/css/ionicons.2c2ae06.eot#iefix) format("embedded-opentype"), url(static/css/ionicons.24712f6.ttf) format("truetype"), url(static/css/ionicons.05acfdb.woff) format("woff"), url(static/css/ionicons.621bd38.svg#Ionicons) format("svg");
    font-weight: 400;
    font-style: normal
}

找到@font-face样式，发现里面样式的URL对应的路径不对，以为一开始访问css文件夹，在里面访问fonts字体文件夹应退一层目录，修改后代码为

@font-face {
    font-family: Ionicons;
    src: url(../fonts/ionicons.2c2ae06.eot);
    src: url(../fonts/ionicons.2c2ae06.eot#iefix) format("embedded-opentype"), url(../fonts/ionicons.24712f6.ttf) format("truetype"), url(../fonts/ionicons.05acfdb.woff) format("woff"), url(../fonts/ionicons.621bd38.svg#Ionicons) format("svg");
    font-weight: 400;
    font-style: normal
}

4.修改路径后访问效果

微信截图_20170608102219.png