在使用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')
网友评论