解决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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
JavaScript 闭包深入理解(closure)
May 27 Javascript
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
jquery 选取方法都有哪些
May 18 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
js返回顶部实例分享
Dec 21 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
Node.js API详解之 zlib模块用法分析
May 19 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
解决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下通过file_get_contents的代理使用方法
2011/02/16 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
javascript &&和||运算法的另类使用技巧
2009/11/28 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
交通专业个人自荐信格式
2013/09/23 职场文书
大学生涯自我鉴定
2014/01/16 职场文书
银行内勤岗位职责
2014/04/09 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
公司规章制度范本
2015/08/03 职场文书
PHP正则表达式之RCEService回溯
2022/04/11 PHP
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技