在创建vue项目时,我们在打包后运行过程中往往会出现背景图片引用路径错误的问题。那是因为在打包过程中,url-loader中会对图片大小有限制。(build/webpack.base.conf.js)
对于符合test正则表达式的文件,当小于10000B时对文件进行base64转码,如果超过10000B就打包到‘img/[name].[hash:7].[ext]’下。根据‘build/webpack.base.conf.js’与‘config/index.js’对应关系,可知大于10000B的图片被打包到了‘static/img’目录,所以引用路径就变成了‘static/img/+文件名’。而对于css文件来说,在css目录下是没有static目录的,所以造成路径引用错误。
解决办法:
- 在data中require一个图片,然后‘:src’或‘:style’进行引用,但对于需要通过修改元素类名来切换背景图的问题就不适用了。
- 手动修改背景图大小,将图片大小缩小到10000B以下。个人认为这是一个比较蠢的办法,因为在一个项目中可能会遇到好多比较大的背景图,总不能每个图片都去手动修改大小。
- 修改‘build/webpack.base.conf.js’下文件最小限制,将其修改至大于最大图片大小,使用所有图片都进行base64转码。而base64转码会增加图片大小。对于小图片来说,增加的大小导致js请求时间增长会小于http请求图片的时长,能够优化页面加载速度。但对于大图片来说,js增加的时长会大于http请求时长,反倒不利于页面加载,拖慢页面加载速度。
- 将图片保存至static的图片文件夹中,使用相对路径引用图片
修改‘config/index.js’下assetsPublicPath的‘/’为‘./’,在‘build/utils.js’中ExtractTextPlugin.extract下添加‘publicPath: '../../'’