解决vue项目打包后背景图片路径错误问题

今天打包vue项目上线后,发现背景图片未加载出来,其他图片加载正常,那个未加载出来的背景图片是在css文件中引入的,调试时发现图片的路径不对,改了build文件夹下utils.js文件,然后背景图片就能正常加载了。
打开build/utils.js,添加一行代码:

publicPath: '../../',

在这里插入图片描述
背景图片在生产环境路径错误的原因:
构建后的项目, 都需要读取静态资源,静态资源分为三种, JS, CSS, IMG,
此时通过img标签引入的图片显示正常,是因为img为html标签,他的路径是由index.html开始访问的,他走static/img/'图片名’是能正确访问到图片的;而在css文件中引入的图片,在css目录下并没有static目录。所以此时需要先回退两层到根节点处才可以正确获取到图片。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值