vue项目打包后出现图片引用路径错误的问题

在创建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目录的，所以造成路径引用错误。

解决办法：

1. 在data中require一个图片，然后‘:src’或‘:style’进行引用，但对于需要通过修改元素类名来切换背景图的问题就不适用了。
2. 手动修改背景图大小，将图片大小缩小到10000B以下。个人认为这是一个比较蠢的办法，因为在一个项目中可能会遇到好多比较大的背景图，总不能每个图片都去手动修改大小。
3. 修改‘build/webpack.base.conf.js’下文件最小限制，将其修改至大于最大图片大小，使用所有图片都进行base64转码。而base64转码会增加图片大小。对于小图片来说，增加的大小导致js请求时间增长会小于http请求图片的时长，能够优化页面加载速度。但对于大图片来说，js增加的时长会大于http请求时长，反倒不利于页面加载，拖慢页面加载速度。
4. 将图片保存至static的图片文件夹中，使用相对路径引用图片
   

 修改‘config/index.js’下assetsPublicPath的‘/’为‘./’，在‘build/utils.js’中ExtractTextPlugin.extract下添加‘publicPath: '../../'’