关于npm run build打包后css样式中的图片失效的…

2018-07-09 13:47:45来源：博客园阅读 ()

平时run dev都能正常显示的css背景图片在npm run build打包后竟然不显示了（写在标签对中的图片都可以正常显示），而且dist/static/img目录下是确实有这张图片的，于是查看打包后的dist/static/css目录下的css文件

发现打包生成的图片路径为background:url(static/img/bg.9a5d8a4.png);

路径是错的，css文件的所在目录下当然没有static文件夹，所以也就无从找到这张背景图片，所以正确的应为

../../static/img/bg.9a5d8a4.png

每次都手动改不现实，也不优雅

正确的解决方案应为打开项目目录下的build/utils.js

找到下方代码段，插入 publicPath:'../../',

// Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath:'../../',//添加这一行
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }