vue项目之webpack打包静态资源路径不准确

在部署Vue项目到服务器时遇到静态资源,如js文件和图片找不到的问题。问题源于资源打包路径设置为绝对根目录,导致路径错误。解决方法包括修改config/index.js中的assetsPublicPath为相对路径,以及在utils.js中调整图片打包路径,避免webpack的limit限制导致的base64转换。通过这些修改,可以确保项目中的静态资源路径正确,从而成功加载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

文章有点长,希望能够阅读下去,有所帮助。

问题

  1. 将打包好的项目部署到服务器,发现报错说图片找不到。
  2. 静态资源如js访问不到

分析并且解决问题

明确一点的就是,看到报错404,找不到静态资源,很明显,路径错误了。 


静态资源找不到如js文件

资源打包路径有误,打包后的资源使用了绝对根目录路径,因此将项目部署到特定目录下,其引入的资源路径无法被正确解析。

解决:

找到config下面的index.js文件,将划线处改为如下样子。

之前是根目录,肯定找不到文件,我们改成相对目录即可。打包后,去看看index.html中引入的文件就知道变化了。

图片找不到

首先我们来看一下我们打包后生成的文件目录:

 上面的报错,要是没有static/css就完全可以找到图片了。但是为什么有的图片能够找

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值