解决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拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
JS实现点击掉落特效
Jan 29 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 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
js null undefined 空区别说明
2010/06/13 Javascript
javascript数组排序汇总
2015/07/07 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
原生JS实现不断变化的标签
2017/05/22 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
中科方德软件测试面试题
2016/04/21 面试题
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
骨干教师申报材料
2014/12/17 职场文书
2015年度企业工作总结
2015/05/21 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android
如何利用Python实现一个论文降重工具
2021/07/09 Python
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python