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

Question

我使用background属性，设置一个div的背景为一张图片，这个图片和这个vue组件在同一个文件夹下，assetsPublicPath也从 “/” 改成了“./” ，在同一个组件中，直接使用img src的方式导入的图片打包后，没有问题，但是使用background的div图片路径错误，用f12打开观察了一下，这个背景图片和img图片的区别在于img的图片前有“./”，而背景图的图片没有。
图片html代码为：
<img src="./header.jpg">

背景图的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，你只需要写'../../'。so try it~