vue上线后,背景图片路径错误
build 下的utils.js中添加配置
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../',//配置背景图片打包后路径出错问题
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
打包后发现一部分背景图片还是没显示出来。后来找到一个规律:凡是行内样式中写的style:background的背景图片都没出来,
解决方法:将style样式写到css中,打包后图片显示正确。理由暂不清楚。
vue上线后,背景图片路径错误的更多相关文章
- 解决Vue打包后背景图片路径错误问题
1.原因解析 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run bu ...
- Vue项目开发之打包后背景图片路径错误的坑
在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...
- Vue项目打包后背景图片路径错误
vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...
- vue webpack打包后.css文件里面的背景图片路径错误解决方法
资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
- vue项目打包后资源相对引用路径的和背景图片路径问题
vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...
- vue+webpack项目打包后背景图片加载不出来问题解决
在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...
- vue图片、背景图片路径问题
vue图片.背景图片路径问题 vue中引入图片经常会出现路径问题,在此记录一下: 1.组件中 <img> 引用图片 <img src="../assets/img/logo ...
- webpack学习笔记——打包后直接访问页面,图片路径错误
我说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误.当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误. 先看我的项目代码 ...
- vue 打包的项目当背景图路径错误
当背景图路径错误时: 在build/utils.js中添加或更改这句话:publicPath: '../../',
随机推荐
- python set 集合复习--点滴
一.set特性: set是一个无序不重复的元素集合. 集合对象是一组无序排列的可哈希的值,集合成员可以做字典中的键.集合支持用in和not in操作符检查成员,由len()内建函数得到集合的基数(大小 ...
- JS 模拟 重载
重载:方法,根据传入的参数列表不同,执行不同的任务. 比如:functiion jz(money){ //现金结账:验钞,找零 } function jz(cardId,pwd){ //刷卡结 ...
- BEAM188和LINK180简单实例
简介 一开始想做一个绳索单元悬挂重物的仿真,其实想法很简单,但是在实现过程中却出现了很大的问题,纠结了很久,初步归结为:绳索单元在垂直其单元方向上受力,会导致其产生很大的变形,从而导致其不收敛.因此专 ...
- [Java] 資料輸入的差異性(System.in、BufferedReader、Scanner)
一.System.in System.in提供的read方法每次只能讀取一個字節的數據,不實用 二.BufferedReader BufferedReader類位於java.io包中,使用要加上 im ...
- 第三章 JQuery: HelloWorld--常见方法--css--选择器--筛选器--属性--效果--事件--数组操作--字符串操作--对象转换
1.jQuery简介 为了简化JavaScript 的开发, 一些JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的页面, 并且兼 ...
- zookeeper的WEB客户端zkui使用
转载自:http://blog.csdn.net/csolo/article/details/53694665 前面几篇实践说明了zookeeper如何配置和部署,如何开发,因为大多是后台操作,对于维 ...
- 围绕Buganizer的产品流程
做技术的一定知道缺陷跟踪系统(bug系统),更不用说做测试的了,不过普遍都认为这系统是用来记录bug的,其实在google内部,这套系统是产品/项目围绕的核心.Google Buganizer扩展了类 ...
- 深入了解scanf()/getchar()和gets()/cin等函数
转:http://www.cnblogs.com/FCWORLD/archive/2010/12/04/1896511.html 转:问题描述一:(分析scanf()和getchar()读取字符) s ...
- sweetalert弹窗的使用
之前接触到layer弹出层,今天又发现了一个非常实用的弹出层插件,它的名字叫做sweetalert. 官网地址:http://t4t5.github.io/sweetalert/ npm下载方式:np ...
- 执行webpack-dev-server时,提示端口被占用。
执行webpack-dev-server时总出错,提示端口被占用.百度了很多答案都不能解决,最后找到了解决方案,如下: webpack-dev-server --port 8088 使用以上命令修改 ...