解决Vue打包后背景图片路径错误问题
1.原因解析
当用vue-cli自动构建项目后,有两种运行方法,分别是:
npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片。
npm run build : 打包项目,资源使用相对路径,所以会出现路径错误问题。
注:
绝对路径:从盘符开始的路径,如:C:\windows\system32\cmd.exe
相对路径:从当前路径开始的路径
构建后的项目, 都需要读取静态资源,静态资源分为三种, JS, CSS, IMG,目录结构如下:
//结构目录
此时通过img标签引入的图片显示正常,是因为img为html标签,他的路径是由index.html开始访问的,他走static/img/'图片名'
是能正确访问到图片的
但是app.css访问static/img/'图片名'
是访问错误的,因为在css目录下并没有static目录。所以此时需要先回退两层到根节点处才可以正确获取到图片。
2.解决方案
具体办法是:
打开build/utils.js,在图中相应位置加入红框内容,其中值可能会有不同,若不同,自己配置成相应的即可。
转载:https://www.cnblogs.com/crazycode2/p/8623063.html
转载于:https://www.cnblogs.com/sweeeper/p/11232272.html
解决Vue打包后背景图片路径错误问题相关推荐
- 解决vue打包后静态资源路径错误的问题
vue项目完成的最后一步就是打包部署上线,但是打包部署的过程往往不是那么一帆风顺的,现将遇到问题和解决方案记录如下. 图片路径问题 起因: 页面中引入资源的方式往往有如下几种 * HTML标签中直接引 ...
- vue上线后图片不显示_解决Vue打包后访问图片/图标不显示的问题
大家可否遇到过 npm run build打包后,项目在线上运行时,资源文件 (图片.图标)不显示 的问题, 接下来,我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件 打开此文件后 ...
- [vue] 怎么解决vue打包后静态资源图片失效的问题?
[vue] 怎么解决vue打包后静态资源图片失效的问题? 上面蛮多回答感觉像开玩笑似的,静态资源图片失效分几种情况. 1.确定线上环境是否在根路径上,配置资源根目录,vue-cli2 和 vue-cl ...
- vue样式中背景图片路径_vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了 如一个简单css语句 .all_bg { background: url(../imag ...
- vue+webpack项目打包后背景图片加载不出来问题解决
vue+webpack项目打包后背景图片加载不出来问题解决 参考文章: (1)vue+webpack项目打包后背景图片加载不出来问题解决 (2)https://www.cnblogs.com/mica ...
- 解决vue-cli 打包后静态资源路径不对的问题
解决vue-cli 打包后静态资源路径不对的问题 参考文章: (1)解决vue-cli 打包后静态资源路径不对的问题 (2)https://www.cnblogs.com/sifo/p/1008399 ...
- [vue] 怎么修改vue打包后生成文件路径?
[vue] 怎么修改vue打包后生成文件路径? webpack:output.path vue-cli3: outputDir 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...
- 打包后index.html路径错误,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题 2018年05月23日 10:05:35 for_weber 阅读数:14179 Vue项目运行npm run buil ...
- vue样式中背景图片路径_解决vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了 如一个简单css语句 .welcome { width: 420px; height: ...
最新文章
- 我们需要什么样的数据架构?
- 使用PHP对数据库输入进行恶意代码清除
- Linux 下的KILL函数的用法
- java 报500该怎么解决_关于servlet500错误 应该怎么解决
- 如何一站式解决“人财物事”管理难题?
- Chrome中输入框默认样式移除
- Missing iOS Distribution signing identity问题解决
- GStreamer 编写一个简单的MP3播放器
- java二叉树的创建,遍历及其他方法
- 如何使用pywinauto实现一个股票自动交易系统?
- 关于tb jd等电商平台抢购的解决方案
- (七)Kotlin简单易学 基础语法- 自定义异常与先决条件函数
- linux运维工程师问题,2、Linux运维工程师之解决问题思路
- Java方法--汉字数字转阿拉伯数字
- 基于asp.net170CRM客户关系管理系统
- python中大于0怎么表示_python怎么筛选列表中大于0的数据?
- JAVA并发编程(一)上下文切换
- 编写测试用例的基本方法之边界值
- 【三角函数】常用的三角函数相关知识
- 构造函数,定义一个网络用户类,信息有用户 ID、用户密码、 email 地址