vue webpack 打包后css背景图路径问题

最近在写vue-webpack项目时，打包后遇到了css背景图片路径报错的问题

奇怪的是，通过img标签引入的图片路径却没有问题，看来是webpack在打包后，读取css中图片的相对路径出错了。

稍微查了一些资料，发现是webpack自身问题。在webpack中，js和css引入资源的路径是不一样的，js是以调用的位置决定的，而css是以自身的位置决定的，这就导致了css的资源多套了一到多层。

在vue项目中，解决方法也炒鸡简单，只需改一下配置即可：

//build/utils.js
if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'      //多添加这一句，具体的相对路径根据自己的项目路径而定
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

转载于:https://www.cnblogs.com/blogs-xlf/p/10174055.html