开发技术学习

vue的配置文件里面webpack.base.conf.js有这样一段代码：

{
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      }

vue意思是大于10KB的图片会转存到img文件夹下面，小于这个值的就会转成base64

但在页面中我们用的背景图片大于10KB，放在assets的images下面，css中写的是background-images: url("../assets/images/bg.jpg")

打包后背景图片不显示，加载路径有问题，这里我们需要修改vue配置文件util.js里面的：

ExtractTextPlugin.extract

在其中加入：

publicPath: '../'

vue打包后正常显示了背景图片

参考资料：

https://segmentfault.com/q/1010000010488410

https://segmentfault.com/a/1190000010224765