前言

如果说平时工作中遇到这个问题，你该怎么解决？直接去问搜索引擎或者是GPT？那将会非常的低效，为什么我写文章一直在强调你学习东西要系统连贯的学，因为当你出现大的知识断层的时候，很多问题往往你不知道该从何入手，谈何去如何解决呢？ 首先图片404了，你首先要能定位这是前端的问题还是后端的问题对吧，比如说打开控制台，我们看到的是前端的引用的静态资源都找不到了，然后继续分析图片路径对吧，你发现图片的路径怎么不对，少了一个/XXX，噢，你反应过来，你忘记了在vue.config.js里面增加某某配置，好吧，加上搞定，这才是解决问题的流程吧。 不管说你是用webpack打包工具构建你的项目也好，用vite或者其他等等，遇到问题你一定要找到事情的本质，首先解决这个问题你要清楚的理解几个概念，什么是相对路径，什么是绝对路径，脚手架里或者打包工具里面提供的publicPath是干什么用的，可以解决什么问题。如果你对这些概念没有一个很清晰的认知，你该怎么去一步步分析解决问题呢？

绝对路径与相对路径

先引用wiki的官方解释:

获取了什么信息，绝对路径或者全路径指向文件系统的相同位置，相对路径起始于被给出的工作目录。 为什么理论的东西很枯燥，因为理论就是文字，不应用它就是一段文字。为了不让它显得枯燥，我们应该想想，当我们访问一个网站的时候，去请求nginx服务器，拿到我们的页面对吧，假如，我们把前端项目部署在nginx的根目录下，那么我们去访问图片资源是没有问题的，想一想为什么？ 1.假如说我们的域名为http://www.xxx.xx, 我们的图片路径默认用的是相对路径，比如是images/xx.png，那么当我们访问http://www.xxx.xx/index.html的时候，图片的路径是不是就是http://www.xx.xx/images/xx.png对吧，这样就能够找到对应的图片。 2.如果说（我是说如果），此时我的index.html被我最终打包进了app文件夹，而静态资源路径我保持之前路径没变，我问你此时资源的路径会出现什么问题？来别着急，先想一想，给你三分钟，好时间到了，我们来看看问题，那么我们此时访问页面时就变成了http://www.xxx.xx/app/index.html，对不对，那么资源路径呢？变成了http://www.xxx.xx/app/images/xx.png，根据wiki的解释我们不难得出这个结论吧,那我问你这个路径下有这个图片吗？没有吧兄dei？你说他不报404谁报404呢。 所以如果我们不配置，默认webpack打包资源是用的相对路径，会有问题的，脚手架当然会帮我们考虑到这些问题，所以引出了下面的概念。

publicPath

恭喜你，来到了publicPath，它的作用是什么？先来看看文档怎么说:

清晰了吧，vue-cli脚手架的publicPath的配置是和webpack的是一样的，来看看他的默认值是什么'/',什么意思？这个斜杠的作用就是将 相对路径变成绝对路径！ 请务必区分 images/xx.png和/images/xx.png的区别，前者为相对路径，后者为绝对路径。那么我们上面提到的问题便迎刃而解，当我们访问index.html的时候，图片的路径则变成了绝对路径 http://www.xxx.xx/images/xx.png，该路径是正确的可以访问到的。 文档里还提到了，如果你的项目部署在了nginx子路径下，那么同样的为我们的资源配置上对应的绝对路径前缀就好啦！你仔细在你的大脑里品一品这个相对路径和绝对路径。 所以说啊我们不要迷信，但是也要相信因果，因为你了解了一些前置知识，才能得到解决这个问题的结果。

尾声

我写文章注重的是分享思路，我认为思路一定是大于某一个具象的点，如果我不管三七二十一给你抛出来一个问题，然后不管三七二十一给你一个答案，有意义吗？是，问题可能是暂时解决了，如果你遇到类似的问题的时候呢？我希望你可以有自己的思路去想办法解决它。