vue项目打包后css背景图路径不对的问题

问题描述:

自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图:

当使用npm run dev命令本地访问的时候,背景图片是正常显示的,可使用npm run build命令打包后,访问dist目录下的项目,页面背景图路径就不对了,显示不出背景图。如下两张图对比

图一:使用npm run dev命令访问

图二:使用npm run build命令打包之后,访问dist目录下的文件,出现的问题,背景图片路径变成了http://127.0.0.1:9000/static/css/static/img/login-bg.0271ef1.jpeg,而实际在dist目录下,图片路径是这样的,如下图

解决办法:

解决办法为:只需要在build/utils.js文件中添加如下一行代码即可。

publicPath:'../../'

添加位置为如下图:

然后重新执行 npm run build 命令,即可成功显示图片

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逸鹏说道

★Kali信息收集~★7.FPing :ip段扫描

参数: ? 使用方法: fping [选项] [目标...] -a显示是活着的目标 -A 显示目标地址 -b n 大量 ping 数据要发送,以字节为单位 ...

42160
来自专栏简单聊聊Spark

Mac 下安装虚拟机及CentOS6.5的安装,以及ssh工具的破解

一.虚拟机的安装操作流程见如下链接,本例采用VMware Fusion这个虚拟机:

25020
来自专栏JAVA同学会

JMeter基本元素简介

  测试计划对象有一个复选框叫做“Functional Testing”(函数测试模式),如果选中,它将使jmeter记录服务端返回的每一个样例的数据,如果你在...

13130
来自专栏JAVA同学会

JMeter基本元素简介

测试计划对象有一个复选框叫做“Functional Testing”(函数测试模式),如果选中,它将使jmeter记录服务端返回的每一个样例的数据,如果你在测试...

12220
来自专栏互联网软件技术

input上传文件个数控制

67330
来自专栏Jerry的SAP技术分享

使用jMeter构造大量并发的随机HTTP请求

在前一篇文章使用jMeter构造大量并发HTTP请求进行微服务性能测试里,我介绍了如何用jMeter构造并发HTTP请求。但是通过文中介绍的方式构造的并发请求,...

44330
来自专栏小白安全

安全扫描器Nmap渗透使用教程

介绍 nmap是用来探测计算机网络上的主机和服务的一种安全扫描器。为了绘制网络拓扑图Nmap的发送特制的数据包到目标主机然后对返回数据包进行分析。Nm...

48440
来自专栏九彩拼盘的叨叨叨

学习纲要:调试 JavaScript

10840
来自专栏Django中文社区

统计文章阅读量

如何精确地记录一篇文章的阅读量是一个比较复杂的问题,不过对于我们的博客来说,没有必要记录的那么精确。因此我们使用一种简单但有效的方式来记录博客文章的阅读量:文章...

42150
来自专栏ASP.NET MVC5 后台权限管理系统

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(25)-权限管理系统-系统管理员(附生成器)

这一节我们要着手建立系统管理员表,但发布之前,我先发布一个代码生成器给大家先用着。 这个生成器是为这个项目而生的,理论不能用于其他项目,而且写得比较潦草,但能用...

20990

扫码关注云+社区

领取腾讯云代金券