当我们用vue-cli创建项目后,如果在我们的template模板文件中的css样式设置中,有设置了background-image的属性,并且url值传入的是相对路径,那么当我们在打包生产代码时,webpack调用ExtractTextPlugin后生成的代码中,将没办法获取到正确的图片url,因为图片都被打包到静态文件中去了。
解决方法:
- 在build/util.js中配置publicPath:“../../”, 这样可以修正静态资源的url
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
// 加入相对位置,不然background-imgage 的路径引入有问题
publicPath: '../../'
})
}
复制代码
- 不要在style标签里设置background-image,而是直接在内联style里设置,并且不要直接使用url,应该使用如下格式
<div :style="'background-image:url(require('./../assets/abc.png'))'"></div>
复制代码
- 还有设置路径别名的方式,不过本人还没有测试,后续测试没问题再加上。
转载于:https://juejin.im/post/5c2434d1e51d453b3b3949c5