vue run build打包之后服务器端访问图片404

阅读前须知：此篇文章仅仅是本人在项目中爬坑的一个心路历程，理解不够深刻，所以过程比较曲折，全文基本都是从发现问题到解决问题的一个探索过程，所以基本都是引入别人的内容哈，有一定方向只想知道解决方式的的请移步问道最后倒数第二篇原文链接；如有侵犯，联系我删除，如有建议也可以给我留言；

首先，此项目原本是使用的hash模式，因项目过程中需要，转为history模式。一番操作之后发现放到服务器上之后图片没法访问了。

先贴上我的项目结构图，如下：

项目结构图

然后是图片存放位置（项目是半路接手，目录比较乱就将就之前的目录继续撸代码了）：

图片存放路径

项目中图片引入方式：

相对路径引入

一般图片不显示都会想到config > index.js 中的path配置；查阅一番之后首次修改为这样：

一般图片问题都会修改这里，之前遇到的图片不显得问题修改这里也解决了问题，但是这次不行

然后继续查阅，楼主们提到除了上图外另外也需要修改的地方：

一般情况下，比如背景图片img图片不显示，这样修改就差不多能解决问题了，但是这次没有；所以继续深入查找为什么：

发现小图能正常显示；因为loader的limit处理转换为base64不存在路径问题的关系，但是这样也还是没找到解决的办法呀；继续往下找；

通过pc端调试发现加载不出来的图片地址都不对，所有不能加载的图片都是去根目录下找寻的图片地址：

项目在服务器端是二级目录，所以这里staic前面应该还有个文件夹名字才能正确访问

那么问题来啦，怎么去让他自己生成二级目录的正确图片访问地址呢？ 灵感来自这篇文章：https://segmentfault.com/q/1010000009177458；

如果后端条件允许，能把打包后的文件放根目录就直接放根目录，就省去麻烦，不用折腾了！！！但是我们不能，所以我们得继续寻找

功夫不负有心人，最终觅得一篇解决问题的文章，先贴上原文地址：https://blog.csdn.net/weixin_34261415/article/details/88657836；

按照此文解决问题前需要了解一下配置的含义:

原文戳这里：https://blog.csdn.net/u014717572/article/details/84857588;

了解配置内容之后，大概清楚是怎么回事，那么最后就是怎么实现服务器访问加上一级目录前缀，请您接着往下看（以下为引入原文内容，如有侵权请联系删除）：

所以需要解决项目nginx部署到非根目录下vue配置：

原文链接：https://blog.csdn.net/lilongwei4321/article/details/81163766 

按照上文（上图）的方法撸了一遍，打包丢服务器上之后果然没有问题了；不过得注意，图片不能像这样直接引入

要么直接在html中img标签常规引入，要么使用@import引入（图片为引用：加班太晚就用人家的截图吧，望海涵）

原文：https://blog.csdn.net/lilongwei4321/article/details/82783523