解决vue打包css文件中背景图片的路径问题


Posted in Javascript onSeptember 03, 2018

vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了

如一个简单css语句

.welcome { width: 420px; height: 235px; background: url(../img/welcome.jpg) 0 0 no-repeat;

但是打包后路径成了却出现404访问不到的问题。

解决的办法很简单

build路径下utils.js文件

// Extract CSS when that option is specified
 // (which is the case during production build)
 if (options.extract) {
  return ExtractTextPlugin.extract({
  use: loaders,
  fallback: 'vue-style-loader',
  publicPath:'../../'   //添加此代码!!!
  })
 } else {
  return ['vue-style-loader'].concat(loaders)
 }

以上这篇解决vue打包css文件中背景图片的路径问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
JS去除数组重复值的五种不同方法
Sep 06 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
vue+mock.js实现前后端分离
Jul 24 Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 #Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 #Javascript
详解jQuery中的easyui
Sep 02 #jQuery
vue-cli脚手架的安装教程图解
Sep 02 #Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 #Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 #Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 #Javascript
You might like
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
请离开include_once和require_once
2013/07/18 PHP
php去除数组中重复数据
2014/11/18 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
为jQuery增加join方法的实现代码
2010/11/28 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
python安装pil库方法及代码
2019/06/25 Python
python实现淘宝购物系统
2019/10/25 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
施工员岗位职责
2014/03/16 职场文书
水毁工程实施方案
2014/04/01 职场文书
个人剖析材料范文
2014/09/30 职场文书
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB