vue-cli中解决css引用图片打包后找不到文件资源的问题

1.在CSS中引入图片
 

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

注意：此处的图片与索引文件在同一个目录下;

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

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

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

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

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

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

找到建/ 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)
    }

重新bulid一下就OK了，我比较喜欢第二种方法，比较方便。