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

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

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

问题

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

分析并且解决问题

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


静态资源找不到如js文件

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

解决:

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

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

图片找不到

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

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值