解决Vue打包后访问图片/图标不显示的问题


Posted in Javascript onJuly 25, 2019

大家可否遇到过 npm run build 打包后,项目在线上运行时,资源文件 (图片、图标)不显示 的问题,

接下来,我给大家分享一下我的解决方案~

1.检查打包后dist中的css文件

解决Vue打包后访问图片/图标不显示的问题

打开此文件后你会头晕,因为都是打包压缩过的css代码,不过没关系 ,关键字搜索url

解决Vue打包后访问图片/图标不显示的问题 

检查该url路径是否匹配正确

对比后惊人发现!!!

解决Vue打包后访问图片/图标不显示的问题

因此在url路径前添加../../就OK了, 但是 很麻烦,每次打包后都要进行二次加工吗?

并不是!!!

2.自动添加 ../../ 的方法

打开build/utils.js,检测 publicPath 值是否正确,自己配置成相应的即可!

if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }

配置好之后,npm run build打包后就会自动匹配正确的路径,无需手动修改,

总结

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

Javascript 相关文章推荐
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
js校验开始时间和结束时间
May 26 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 #Javascript
vue使用代理解决请求跨域问题详解
Jul 24 #Javascript
Vue父组件如何获取子组件中的变量
Jul 24 #Javascript
mock.js模拟数据实现前后端分离
Jul 24 #Javascript
vue+mock.js实现前后端分离
Jul 24 #Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 #Javascript
Vue封装的组件全局注册并引用
Jul 24 #Javascript
You might like
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
Python运用于数据分析的简单教程
2015/03/27 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
Python BS4库的安装与使用详解
2018/08/08 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
基于python实现学生管理系统
2018/10/17 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
np.dot()函数的用法详解
2020/01/17 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
python 获取字典键值对的实现
2020/11/12 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
退休教师欢送会主持词
2014/03/31 职场文书
2015年安全月活动总结
2015/03/26 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android