解决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中使用"with"语句中跨frame的变量引用问题
Mar 08 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
Angular 数据请求的实现方法
May 07 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
ES6 async、await的基本使用方法示例
Jun 06 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 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
php empty() 检查一个变量是否为空
2011/11/10 PHP
php array_filter除去数组中的空字符元素
2020/06/21 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
深入理解React高阶组件
2017/09/28 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
vue 中固定导航栏的实例代码
2019/11/01 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
MySQL最常见的操作语句小结
2015/05/07 Python
Python实现处理管道的方法
2015/06/04 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Python zip()函数用法实例分析
2018/03/17 Python
Python paramiko模块的使用示例
2018/04/11 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
财务会计人员求职的自我评价
2014/01/13 职场文书
办公室文员工作职责
2014/01/31 职场文书
《故乡》教学反思
2014/04/10 职场文书
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android