极乐门资源网 Design By www.ioogu.com

在vue+cli项目中使用iview组件及icon图标,打包后icon不显示,解决办法:

1.在build文件夹下找到utils.js文件,把publicPath改为 ../../

if (options.extract) { 
 return ExtractTextPlugin.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"embedded-opentype"), url(../font/ionicons.ttf"truetype"), url(../font/ionicons.woff"woff"), url(../font/ionicons.svg"svg"); 
 font-weight: 400; 
 font-style: normal 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
vue.js,iview打包上线,vue.js,iview打包字体图标不显示

极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“vue.js iview打包上线后字体图标不显示解决办法”

暂无vue.js iview打包上线后字体图标不显示解决办法的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。