解决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 相关文章推荐
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
非常漂亮的js烟花效果
Mar 10 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 Javascript
ES6 十大特性简介
Dec 09 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 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
杏林同学录(六)
2006/10/09 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
js Flash插入函数免激活代码
2009/03/31 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
大学生毕业的自我评价分享
2014/01/02 职场文书
旅游个人求职信范文
2014/01/30 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
文明班级建设方案
2014/05/15 职场文书
就业协议书
2014/09/12 职场文书
超市食品安全承诺书
2015/04/29 职场文书
十月围城观后感
2015/06/08 职场文书
2016公司年会主持词
2015/07/01 职场文书
国际贸易实训总结
2015/08/03 职场文书
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL