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

时间:2021-09-08 07:43:01

当我们用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