Solve the problem of resource files not being found after css referenced images are packaged in vue+webpack

Now I will share with you an article about how vue webpack solves the problem of not being able to find resource files after css referenced images are packaged. It has a good reference value and I hope it will be helpful to everyone.

Use vue to package and reference image resources through css.

.img { 
  height: 500px; 
  width: 100%; 
  background: url("./assets/img/1.jpg") no-repeat; 
  background-size: 100%; 
 }

The effect of hot updating the development environment is like this

But the page after packaging is An error that the resource cannot be found is reported.

After checking the reason, style-loader could not set its own publicPath after the css introduced the image and then packaged it, so I changed the css path publicPath of ExtractTextPlugin.

if (options.extract) { 
   return ExtractTextPlugin.extract({ 
    use: loaders, 
    // css 引用图片打包问题 
    publicPath: '../../../', 
    fallback: 'vue-style-loader' 
   }) 
  } else { 
   return ['vue-style-loader'].concat(loaders) 
  }

After building once, no error was reported and the display was normal!

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Solve the problem of Vue modifying the array through the following table and the page not rendering

Vue.js implementation How to drag pictures randomly

Solve the problem that Vue modifies the array through the following table and the page does not render

The above is the detailed content of Solve the problem of resource files not being found after css referenced images are packaged in vue+webpack. For more information, please follow other related articles on the PHP Chinese website!