vue-cli 打包之后图片引用路径问题

过完五一，感觉整个人跟废了一样，虽然五一期间也没做什么，就是感觉累，感觉困。但无奈今天还有一堆事情等我去做。

早上来先发了一版v5.0.1，开启项目新版的第一次！但是毫无疑问，出了很多问题，除了上次打包后js、css路径错误问题（详情请见：https://blog.csdn.net/AmberWu/article/details/79529363），这次出现了图片undefined的问题。

先来看下报错：

首先看下我项目的dist目录：

按理说，这个img的路径应该是https://xxxxxxxxxxxxxx/dist/static/img/xxx.xxxxxx.png,但是很明显路径就成了https://xxxxxxxxxxxxxx/static/css/static/img/xxx.xxxxxx.png，首先应该可以确定是打包的时候出现了什么问题。

其实很简单。打开/build/utils.js文件，找到这段代码：

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

加上红框内容：publicPath: '../../',当然这个路径是根据自己项目的实际情况来的

再次npm run build就可以看效果啦。