vue打包后，图片不显示，img路径404

vue打包后，背景图片不显示了

遇到的问题：开发时图片好好的，打包后，图片不显示，如下图，转盘背景图没有了：

首先，说一下项目里图片引入的三种方式：

1. 在页面中，通过<img src=''>路径"属性；
2. 在css文件中，通过背景图片的url('路径')引入图片；
3. 在js中通过require('路径')引入图片；

造成图片找不到的原因主要是：webpack打包以后，生成一个目录/static和一个index.html文件，会改变这几种图片引入的路径。

具体改变如下：

• 在页面中和js中，改变是一样的，直接将路径直接改为‘static/img/XXX.png’，所以，如果是在页面中或者js中引入的图片，正常打包后，没有问题正常显示；

//.wheel-pointer {
//  background: url("../../assets/img/draw_btn.png") no-repeat center top;
//}
//打包后如下：
.wheel-pointer[data-v-bb1116d8] {
    background: url(../../static/img/draw_btn.f43e809.png) no-repeat top;
}

• 在css中，是将路径中的文字路径替换为‘static/img’，这样替换一定会出现问题，因为在打包好的文件中就只有两层目录‘../../’就不知道返回到什么目录下面去了；
  注意url中的路径改变，图片展示如下，
  – 打包前的样式：
  
  – 打包后的样式
  

其原理就是不管哪种方式都去static/img下寻找图片。

解决方案

在build/utils.js中添加好参数保存后，重新打包上传到服务器，再运行图片就出现了：

该文章为记录自己遇到的问题所用，如果有什么错误，欢迎指出。
【补充】：
遇到问题：打包后的路径少了一层项目名，导致404
解决方法：在config/index.js下的build里，修改assetsPublicPath: '/确实的路径name/'
参考链接：https://blog.youkuaiyun.com/qq_30346089/article/details/77947998
在打包即可