Vue+Webpack打包CSS引用图片资源路径错误的解决方案

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引用图片打包后找不到资源文件问题的完整解决方案。希望本文的内容能对大家有所帮助，欢迎继续支持本站获取更多技术分享。