在使用webpack打包的时候发现有一些图片在打包之后，404看不到了

问题

在我的vue项目中，测试环境下图片可以显示出来，但是到生产环境下我的图片就没了

dev测试中

打包之后

控制台报404错误

结果发现问题在打包之后的文件夹中没有我需要的一些图片。

原因

导致这个问题的原因是，我在项目中对图片的调用使用了字符串拼接的模式

这个url只有在页面加载出来的时候才会去读取。
在dev环境中，我设置了默认对一些静态文件的放置，所以可以看到

但是到了生产环境。webpack的打包原理是

而我的url是拼接的，打包的时候后面的参数还没识别出来，所以无法打包对应的文件。在生产环境中当然无法看到对应的文件了。

解决办法

强行打包。
在项目中装shelljs，使文件中可以使用linux命令

 cnpm i shelljs --save-dev

生产环境的进入口，可以在packge.json中看到

引用shelljs

image.png

在打包完成后，执行linux命令，将我们的文件夹复制到正确的位置

cp('-R', 'src/assets/img', webpackConfig.output.path + '/static')