Vue 项目打包发布后 CSS 中的背景图片 404

Question

Vue 打包的时候，一般小图标都是生成的 Base64 格式的，直接写到了 CSS 文件里面，但是如果图片较大，就会直接引用图片地址而不是生成 Base64 代码。

比如我这个背景图片

.uHead {
  background: url(../../static/img/uheadBg.jpg) no-repeat center;
  background-size: cover;
  color: #fff;
  padding: 1rem 0.75rem;
  font-size: 0.7rem;
}

打包出来的地址是

http://domain.com/mobile/static/css/static/css/uheadBg.png

这时候，我们只需要修改 build/utils.js 中的 generateLoaders 方法，如下代码，增加 publicPath: '../../'：

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    publicPath: "../../",
    fallback: "vue-style-loader"
  });
} else {
  return ["vue-style-loader"].concat(loaders);
}