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

在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一次，问题解决了