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

时间 2019-11-10

标签 vue+webpack vue webpack 打包以后超过 url loader 大小限制图片 css background image 使用路径问题栏目 HTTP/TCP 繁體版

原文原文链接

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

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

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