在使用webpack打包的时候发现有一些图片在打包之后,404看不到了
问题
在我的vue项目中,测试环境下图片可以显示出来,但是到生产环境下我的图片就没了
结果发现问题在打包之后的文件夹中没有我需要的一些图片。
原因
导致这个问题的原因是,我在项目中对图片的调用使用了字符串拼接的模式
这个url只有在页面加载出来的时候才会去读取。
在dev环境中,我设置了默认对一些静态文件的放置,所以可以看到
但是到了生产环境。webpack的打包原理是
而我的url是拼接的,打包的时候后面的参数还没识别出来,所以无法打包对应的文件。在生产环境中当然无法看到对应的文件了。
解决办法
强行打包。
在项目中装shelljs,使文件中可以使用linux命令
cnpm i shelljs --save-dev
生产环境的进入口,可以在packge.json中看到
引用shelljs
在打包完成后,执行linux命令,将我们的文件夹复制到正确的位置
cp('-R', 'src/assets/img', webpackConfig.output.path + '/static')