vue-cli创建的webpack工程中引用ExtractTextPlugin导致css背景图设置无效的解决方法

当我们用vue-cli创建项目后，如果在我们的template模板文件中的css样式设置中，有设置了background-image的属性，并且url值传入的是相对路径，那么当我们在打包生产代码时，webpack调用ExtractTextPlugin后生成的代码中，将没办法获取到正确的图片url，因为图片都被打包到静态文件中去了。

解决方法：

1. 在build/util.js中配置publicPath：“../../”, 这样可以修正静态资源的url

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        // 加入相对位置，不然background-imgage 的路径引入有问题
        publicPath: '../../'
      })
    }
复制代码

1. 不要在style标签里设置background-image，而是直接在内联style里设置，并且不要直接使用url，应该使用如下格式

<div :style="'background-image:url(require('./../assets/abc.png'))'"></div>
复制代码

1. 还有设置路径别名的方式，不过本人还没有测试，后续测试没问题再加上。

参考链接：在style中设置background-image时路径问题

转载于:https://juejin.im/post/5c2434d1e51d453b3b3949c5