Vue打包后，css引入的图片等资源找不到路径的问题

Vue 在npm run dev 的时候，图片背景等正常显示，npm run build后，报错，提示图片找不到。

原因： npm run dev 时候，加载资源是绝对路径，

           npm run build 时候，加载资源是相对路径，且文件目录已改变。

 默认情况下为：

      index.html
      static
      | --img
          | --图片.jpg
      | --css
          | --app.css
      | --js

          | --app.js

打包后，不管原先的图片资源在哪里，路径通通变成static/img/xxxx ，若在HTML里的IMG标签的src引入图片，则正常显示，因为路径是从 index.html 开始寻找的，所以static/img/xxxx是能正确访问到图片。

 但是在css/app.css里，在当前的CSS目录下，无 static/img 路径，所以资源找不到。

解决办法：

 打开build / utils.js，在绿色位置加入 publicPath：'../../' ,（如果自己更改了打包时候的路径，请自行匹配）

 该设置会把css所有引入的资源的路径变成 ../../static/img/ ，这样就能找到资源了。

如下：

if（ options.extract）{ 

      return ExtractTextPlugin.extract（{         

         use: loaders,

         fallback: 'vue-style-loader',

           publicPath：'../ ../'
      }）
   } else {
      return ['vue-style-loader'].concat（loaders）
   }