项目用run dev build打包后发现很多图片没有显示，所以本地没有问题！查找原因，发现默认通过webpack vuecli打包的css、js等资源都有绝对路径。

因为我们的图片路径都要经过文件夹，在本地引用图片是绝对路径，但是打包后，因为配置的静态文件夹作为根路径，很多图片找不到也不会显示。

解决方案如下：

(1).

修改资产公共路径：’。/'

(2).打开webpack.prod.conf.js，并添加public path :’。输出中的“/”。

虽然解决了资源路径的引用问题，但是资源中的背景图片仍然没有显示，背景： URL(././assets/images/logo-index . png’)不重复；相对打包后就变成了URL(static/img/logo-index . 2 fbf 2 . png)no-repeat，所以要保持css引用图片的正常路径，也就是URL(././static/img/logo-index . 2 fbf 2 . png)无重复

然后您需要修改构建文件夹下的utils.js代码，如图所示：

添加公共路径： '的行代码././'，这样就可以解决字体或图片引用的问题。

摘要

以上就是对边肖推出的vue webpack打包后图片路径错误的完美解决方案。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！