解决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 相关文章推荐
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
js实现日期级联效果
Jan 23 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
微信小程序的部署方法步骤
Sep 04 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
JSONP 的原理、理解 与 实例分析
May 16 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开发的一些注意点总结
2010/10/12 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
python封装对象实现时间效果
2020/04/23 Python
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
python绘制条形图方法代码详解
2017/12/19 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
Python API len函数操作过程解析
2020/03/05 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
详解Scrapy Redis入门实战
2020/11/18 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
业绩考核岗位职责
2014/02/01 职场文书
2014年三八妇女节活动方案
2014/02/28 职场文书
保护环境倡议书300字
2014/05/19 职场文书
经济类毕业生求职信
2014/06/26 职场文书
赔偿协议书范本
2014/09/12 职场文书
个人德育工作总结
2015/03/05 职场文书
出国留学自荐信模板
2015/03/06 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
合同纠纷调解书
2015/05/20 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
严以用权学习心得体会
2016/01/12 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书