详谈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 相关文章推荐
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
jquery实现倒计时效果
Dec 14 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
js 轮播效果实例分享
Dec 28 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
vue实现搜索功能
May 28 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
解决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处理复杂xml数据示例
2016/07/11 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
pandas修改DataFrame列名的方法
2018/04/08 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
python实现扫雷小游戏
2020/04/24 Python
python读取xml文件方法解析
2020/08/04 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
怎样自定义一个异常类
2016/09/27 面试题
董事长职责范文
2013/11/08 职场文书
初中学校军训方案
2014/05/09 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers