在css中引入图片

#slider1 {
  background-image: url(./bg02.jpg);
  background-size: cover;
}

注意：此处的图片与index文件在同一个目录下；

在开发环境下背景图片是可以好好的显示的，但是打包后提示找不到资源，报错：

解决的方法有两种：暴力的和柔和的

（1）开始使用暴力的方法，在配置文件（webpack.base.conf.js）中设置limit参数

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

limit参数，代表如果图片小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录，这里如果将limit值设置很大的话，页面上所有的图片都会压缩成base64的图片，这样的话就不会涉及到路径的问题，当然这种暴力的方法会给浏览器带来很大的压力。

（2）现在说说柔和的方法，稍微查一下原因就应该知道，css引入图片再打包后，style-loader无法设置自己的publicPath，所以只要改变style-loader中的publicPath即可，一行代码即可以搞定，

找到build/util.js文件中ExtractTextPlugin的css路径，手动添加publicPath参数，

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

重新build一次，问题解决了