用webpack打包vue项目，图片路径错误。

Question

我使用background属性，设置一个div的背景为一张图片，这个图片和这个vue组件在同一个文件夹下，assetsPublicPath也从“/”改成了“./”，在同一个组件中，直接使用imgsrc的方式导入的图片打包后，没有问题，但是使用background的div图片路径错误，用f12打开观察了一下，这个背景图片和img图片的区别在于img的图片前有“./”，而背景图的图片没有。图片html代码为：背景图的div的css为：background:url('./bg.jpg');background-repeat:no-repeat;background-position:center;background-size:cover;

Answer 1

webpack打包vue项目，会把css部分提取到单独的css文件中，这样造成了图片路径引用错误，一般这种资源都是放在static目录下，然后引用('/static/...')
                            

Answer 2

找到你的utils.js文件，找到use:loaders这句话所在的配置，加入这句话：publicPath:'../',vue的loader对静态资源的路径是需要配置的。注意publicPath里面写的路径不是你图片完整的路径，比如../../static/里面的img，你只需要写'../../'。sotryit~