解决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优缺点分析说明
Jun 09 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
angular6开发steps步骤条组件
2019/07/04 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
python代码制作configure文件示例
2014/07/28 Python
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
django定期执行任务(实例讲解)
2017/11/03 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
python如何统计代码运行的时长
2019/07/24 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
python numpy库np.percentile用法说明
2020/06/08 Python
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
秋季运动会稿件
2014/01/30 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
2015年元旦活动总结
2014/05/09 职场文书
工作会议方案
2014/05/21 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
基层党组织整改方案
2014/10/25 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
2015年服务员工作总结
2015/04/08 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
mysql多表查询-笔记七
2021/04/05 MySQL
如何利用pygame实现打飞机小游戏
2021/05/30 Python
nginx容器方式反向代理实战
2022/04/18 Servers