vue-cli+iview项目打包上线之后图标不显示问题及解决方法


Posted in Javascript onOctober 16, 2019

做vue项目使用的iviewUI库,打包上线之后发现icon都不显示,然后做了很多尝试,更改打包路径等,都没有太好的效果,最后还是在网上找到了方法:

1. 方法一:

在build/utils.js下面找到这段代码,将其中publicPath改成…/…/,保存并重新打包。注意:这个路径不是绝对的,根绝自己的目录结构来写

// Extract CSS when that option is specified
 // (which is the case during production build)
 if (options.extract) {
  return ExtractTextPlugin.extract({
   use: loaders,
   publicPath: '../../',
   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
 })
},

总结:我是通过第一种方法解决的,可以完美解决,这里建议两种都试一下,如果第二种方法能解决的话,使用第二种,因为第二种方法相对第一种更灵活。

总结

以上所述是小编给大家介绍的vue-cli+iview项目打包上线之后图标不显示问题及解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
再探JavaScript作用域
Sep 24 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 #Javascript
微信小程序如何实现在线客服功能
Oct 16 #Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 #Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 #Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 #jQuery
JS使用正则表达式提交页面验证的代码
Oct 16 #Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 #Javascript
You might like
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
python修改注册表终止360进程实例
2014/10/13 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
Python实现的读写json文件功能示例
2018/06/05 Python
python实现键盘输入的实操方法
2019/07/16 Python
在Django中实现添加user到group并查看
2019/11/18 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
大学生职业生涯规划书汇总
2014/03/20 职场文书
推荐信格式范文
2014/05/09 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
决心书格式及范文
2019/06/24 职场文书
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis
MySQL 逻辑备份 into outfile
2022/05/15 MySQL