解决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判断ie版本号的简单实现代码
Mar 05 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
js实现交通灯效果
Jan 13 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
vue生命周期的探索
Apr 03 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
JS运算符简单用法示例
Jan 19 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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
php 缓存函数代码
2008/08/27 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
javascript关于继承解析
2016/05/10 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
python字典操作实例详解
2017/11/16 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
一个SQL面试题
2014/08/21 面试题
校庆标语集锦
2014/06/25 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP