解决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 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
vue router 配置路由的方法
Jul 26 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
Webpack3+React16代码分割的实现
Mar 03 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 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抓取https的内容的代码
2010/04/06 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
如何通过python实现全排列
2020/02/11 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
上课迟到检讨书100字
2014/01/11 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
党员对照检查材料
2014/09/22 职场文书
银行贷款收入证明
2014/10/17 职场文书
英语辞职信范文
2015/02/28 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书