解决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 相关文章推荐
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
原生JS封装vue Tab切换效果
Apr 28 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
深入PHP5中的魔术方法详解
2013/06/17 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
python3简单实现微信爬虫
2015/04/09 Python
python executemany的使用及注意事项
2017/03/13 Python
pandas的qcut()方法详解
2019/07/06 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
大学学年自我鉴定
2013/10/28 职场文书
结婚典礼证婚词
2014/01/11 职场文书
大学活动总结格式
2014/04/29 职场文书
企业法人授权委托书
2014/09/25 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
九年级数学教学反思
2016/02/17 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书