webpack 打包之后 css文件中 url路径问题

今天把项目打包了放到本地服务器上跑了一下。哇，图片404了，这是啥情况本地都跑了好好的啊。赶紧去查下webpack的配置文件，查了一番，没错啊。然后把css文件中的图片url改了改（绝对，相对都改了），还是不成。后面只能求助下度娘了。没让我失望，干净分享一下，遇到的小伙伴还没解决的去试试。

就是这个文件里面引用的图片在打包之后404了

vue文件

  .signUp {    
    width: 100%;    
    min-width: 700px;    
    background: url("../../assets/bgp.png") no-repeat 100%; //此处为背景图片    
    background-size: cover;    overflow: hidden; 
 }
复制代码

util.js文件

const ExtractTextPlugin = require('extract-text-webpack-plugin')

修改之前：
 // Extract CSS when that option is specified    
// (which is the case during production build)    
if (options.extract) {      
    return ExtractTextPlugin.extract({        
    use: loaders,        
    fallback: 'vue-style-loader'      
    })    
   } else {      
    return ['vue-style-loader'].concat(loaders)   
 }

修改之后：
在loader 给它配置单独的 publicPath
 // Extract CSS when that option is specified    
// (which is the case during production build)    

if (options.extract) {      
    return ExtractTextPlugin.extract({        
        use: loaders,        
        fallback: 'vue-style-loader',        
        publicPath:'../../'  //加了这个配置      
    })    
} else {     
     return ['vue-style-loader'].concat(loaders)    
}复制代码

图片资源是通过css加载的如上上面的的代码：

background: url("../../assets/bgp.png") no-repeat 100%;

被相对打包之后变成了这样

url(static/css/static/img/bgp.png.e61b55d.png) no-repeat

所以404咯，

修改了之后就好了，图片都好了，哈哈