vue webpack打包后图片路径错误的处理方法

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

9E3E9C06-4873-4D1B-A5B3-35C71889249E.png

由于我们的图片路径都是经历过文件夹的，在本地引用图片是绝对路径，但打包后由于把配置的static文件夹当成了根路径，所以很多图片找不到都不显示。

处理办法如图：

(1).修改 assetsPublicPath: ‘./’

(2).打开webpack.prod.conf.js，在output：添加 publicPath: ‘./’

7822D742-9A09-428A-A270-B5320A809759.png

尽管处理了资源路径的引用问题，但是资源里面的背景图片还是不显示， background: url(“../../assets/images/logo-index.png”) no-repeat;被相对打包后变成了url(static/img/logo-index.2fbf2.png) no-repeat所以我们要保留css引用图片的正常路径，即：url(../../static/img/logo-index.2fbf2.png) no-repeat
那么就需要修改build文件夹下的utils.js代码，如图所示：

增加publicPath:’../../’这一行代码，这样不管是字体还是图片的引用问题都能处理。