vue.js iview打包上线后字体图标不显示解决办法
在vue+cli项目中使用iview组件及icon图标，打包后icon不显示,解决办法：
1.在build文件夹下找到utils.js文件，把publicPath改为../../
if(options.extract){
returnExtractTextPlugin.extract({
publicPath:'../../',
use:loaders,
fallback:'vue-style-loader'
})
}else{
return['vue-style-loader'].concat(loaders)
}
2.在build文件夹下找到webpack.prod.conf.js文件,修改extract为false
module:{
rules:utils.styleLoaders({
sourceMap:config.build.productionSourceMap,
extract:false,
usePostCSS:true
})
},
如果上面两种方案都没有解决的话，找到iview.css文件查看iview.css中引入font图标的地址是否正确
@font-face{
font-family:Ionicons;
src:url(../font/ionicons.eot?v=2.0.0);
src:url(../font/ionicons.eot?v=2.0.0#iefix)format("embedded-opentype"),url(../font/ionicons.ttf?v=2.0.0)format("truetype"),url(../font/ionicons.woff?v=2.0.0)format("woff"),url(../font/ionicons.svg?v=2.0.0#Ionicons)format("svg");
font-weight:400;
font-style:normal
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。