本文针对Vue结合Webpack打包时，CSS中引用的图片资源在构建后无法正确加载的问题进行了分析。主要原因为style-loader无法正确设置publicPath，导致相对路径解析错误。通过修改ExtractTextPlugin配置中的publicPath参数，修正了资源引用路径，成功解决了打包后图片显示异常的问题。
Vue+Webpack打包CSS图片路径问题描述
在使用Vue进行项目打包时，常常会遇到通过CSS样式引用图片资源的情况。
.img {
height: 500px;
width: 100%;
background: url("./assets/img/1.jpg") no-repeat;
background-size: 100%;
} 在开发环境开启热更新模式下，图片资源能够正常显示，效果符合预期。
然而，当执行完整打包构建后，生成的页面中会出现找不到资源文件的错误提示。
修改ExtractTextPlugin配置解决路径错误
经过排查，发现问题的根源在于CSS引入图片进行打包时，style-loader无法自行设置正确的publicPath。为了解决这一问题，需要手动调整ExtractTextPlugin中CSS路径的publicPath配置。
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
// css 引用图片打包问题
publicPath: '../../../',
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
} 重新执行打包命令后，页面不再报错，图片资源能够正常显示。
以上就是Vue结合Webpack解决CSS引用图片打包后找不到资源文件问题的完整解决方案。希望本文的内容能对大家有所帮助，欢迎继续支持本站获取更多技术分享。