解决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 相关文章推荐
文本框的字数限制功能jquery插件
Nov 24 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
实例解析Array和String方法
Dec 14 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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异步执行的常用方式详解
2013/06/03 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
老生常谈Python序列化和反序列化
2017/06/28 Python
Python之reload流程实例代码解析
2018/01/29 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
在家更换处方镜片:Lensabl
2019/05/01 全球购物
大学毕业生工作的自我评价
2013/10/01 职场文书
食品营养与检测应届生求职信
2013/11/08 职场文书
学校食堂采购员岗位职责
2013/12/05 职场文书
创业计划书的主要内容有哪些
2014/01/29 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
合同范本之电脑出租
2019/08/13 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery