解决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控制frame,iframe的src属性代码
Dec 31 Javascript
jquery 插件学习(五)
Aug 06 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 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
浅析51个PHP处理字符串的函数
2013/08/02 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
vue 递归组件的简单使用示例
2021/01/14 Vue.js
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
python numpy存取文件的方式
2020/04/01 Python
python安装gdal的两种方法
2019/10/29 Python
Python加速程序运行的方法
2020/07/29 Python
信息技术专业个人自我评价
2013/12/11 职场文书
进步之星获奖感言
2014/02/22 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
公务员年度考核评语
2014/12/31 职场文书
学生会部长竞选稿
2015/11/19 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
创业计划书之养殖业
2019/10/11 职场文书