解决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 对象比较实现代码
Apr 27 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
jquery isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
Postman无法正常返回结果问题解决
Aug 28 Javascript
基于postman获取动态数据过程详解
Sep 08 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
Smarty模板快速入门
2007/01/04 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
flash javascript之间的通讯方法小结
2008/12/20 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
canvas时钟效果
2017/02/16 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
如何在 Django 模板中输出 "{{"
2020/01/24 Python
浅谈django channels 路由误导
2020/05/28 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
html5唤醒APP小记
2019/03/27 HTML / CSS
解释一下Windows的消息机制
2014/01/30 面试题
技校生自我鉴定
2013/12/08 职场文书
幼儿园招生广告
2014/03/19 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
网站推广策划方案
2014/06/04 职场文书
建筑工地宣传标语
2014/06/18 职场文书
校运会加油稿大全
2015/07/22 职场文书
检举信的写法
2019/04/10 职场文书