Vue+Webpack打包之后超过url-loader大小限制的图片在css的background-image中使用路径问题

一个vue项目中有一张图片,在css中background-image中使用,大小超过了url-loader大小限制。
npm run dev的时候一切正常。
npm run build之后图片被直接放在dist/static/img文件夹下,但是打包后的css却在dist/static/css/static/img路径下找该图片,如果我把url-loader大小限制改成超过图片大小也能正常显示,但是图片较大不想这样做,这种情况要如何修改保证打包后路径正确?

回答:

修改build/utils.js文件中
if (options.extract) {

  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}
添加:publicPath: '../../' 这一段代码

回答:

一开始图片图片放在了assets文件夹下,img和background-image引用都用相对路径,build的时候设置assetsPublicPath: ‘./‘,打包出来后发现background-image的路径出现了问题
解决方法:

1、先在data里面导入这张图片,例如:

bg:require(‘./openIndexBG2.jpg’)

2、然后在template里面对需要background-image属性的DOM做个绑定,例如:

:style=”{backgroundImage: ‘url(‘ +bg + ‘)’}”

这样就可以避开因打包而造成的的路径问题了

回答:

请问楼主解决了吗?

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注