详谈vue+webpack解决css引用图片打包后找不到资源文件的问题


Posted in Javascript onMarch 06, 2018

使用vue打包,通过css引用图片资源。

.img { 
  height: 500px; 
  width: 100%; 
  background: url("./assets/img/1.jpg") no-repeat; 
  background-size: 100%; 
 }

热更新开发环境的效果是这样

详谈vue+webpack解决css引用图片打包后找不到资源文件的问题

但打完包出来的页面却报找不到资源的错误。

详谈vue+webpack解决css引用图片打包后找不到资源文件的问题

查了一下原因,css引入图片再打包后,style-loader无法设置自己的publicPath,于是我改变了ExtractTextPlugin的css路径publicPath。

if (options.extract) { 
   return ExtractTextPlugin.extract({ 
    use: loaders, 
    // css 引用图片打包问题 
    publicPath: '../../../', 
    fallback: 'vue-style-loader' 
   }) 
  } else { 
   return ['vue-style-loader'].concat(loaders) 
  }

在build一次,没有报错,正常显示!

以上这篇详谈vue+webpack解决css引用图片打包后找不到资源文件的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 对象的定义方法
Jan 10 Javascript
javascript for循环设法提高性能
Feb 24 Javascript
JavaScript高级程序设计 扩展--关于动态原型
Nov 09 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
Vue操作Storage本地化存储
Apr 29 Vue.js
解决vue+webpack打包路径的问题
Mar 06 #Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 #Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 #Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 #Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 #Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 #Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 #Javascript
You might like
PHP 中执行系统外部命令
2006/10/09 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
简述php环境搭建与配置
2016/12/05 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
JavaScript的public、private和privileged模式
2009/12/28 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
Python发送邮件实现基础解析
2020/08/14 Python
技校毕业生的自我评价
2013/12/27 职场文书
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
会议活动邀请函
2014/01/27 职场文书
高中运动会入场词
2014/02/14 职场文书
策划总监岗位职责
2014/02/16 职场文书
行政部岗位职责范本
2014/03/13 职场文书