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时路径问题