重现

// 使用脚手架生成项目
vue init webpack

更改config/index.js配置文件build.assetsPublicPath为'./'
在App.vue的<style>中加一个background: url('./asssets/images/xxx.png')之类相对路径引用的样式

此时进行打包命令

npm run build

你会发现提取出来的css中 url()中图片的路径是static/img/xxx.png 这样的,用浏览器打开index.html将会有xxxxxxx/static/css/static/img/xxx.png这个图片404的报错

解决方案

主要是需要单独为css 配置 publicPath,更改build/utils.js文件中 ExtractTextPlugin 插件的options配置：

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',         // 注意配置这一部分，根据目录结构自由调整
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }