解决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的IE和火狐的兼容性注意事项
Mar 17 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
js实现中文实时时钟
Jan 15 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
使用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
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
php解决安全问题的方法实例
2019/09/19 PHP
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
JS中递归函数
2016/06/17 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
django基于restframework的CBV封装详解
2019/08/08 Python
mac使用python识别图形验证码功能
2020/01/10 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
博士生入学考试推荐信
2013/11/17 职场文书
高级工程师岗位职责
2013/12/15 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
愚人节活动策划方案
2014/03/11 职场文书
施工安全标语
2014/06/07 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
高中生毕业评语
2014/12/30 职场文书
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server
Golang ort 中的sortInts 方法
2022/04/24 Golang