解决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 相关文章推荐
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
使用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
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
PHP getName()函数讲解
2019/02/03 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
python字典的值可以修改吗
2020/06/29 Python
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
建筑工程技术应届生自荐信
2013/09/27 职场文书
4s店市场专员岗位职责
2014/04/09 职场文书
保护黄河倡议书
2014/05/16 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
2015新年寄语大全
2014/12/08 职场文书
红高粱观后感
2015/06/10 职场文书
统招统分证明
2015/06/23 职场文书
学校远程教育工作总结
2015/08/11 职场文书
JS函数式编程实现XDM一
2022/06/16 Javascript