vue项目打包后的图片路径问题

vue项目打包发布后背景图片路径不正确、静态资源css、img、woff路径不正确（已解决）

项目开发过程中很顺畅，但是打包放到服务器之后就访问不到文件了，或者是能访问文件，但是icon图标不见了，一点都不友好，尝试修改几个文件，来解决我遇到的问题。网上搜索到很多方案，这是我成功解决的方案。

问题类型：img src动态路径打包找不到路径资源

解决方法：引用别名 或者是通过 require、import的方式加载图片

<img src="~assets/aaa.png">

<img :src="'@/assets/aaa.png'">

this.img = require('../img/aaa.png')

import img from '../img/aaa.png'

问题类型：js,css,静态资源文件路径不正确

解决方法：修改 utils.js 和 config/index

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../' // 增加这一行
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

build: {
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './', // 这里的‘/’更换为'./'
  }

注意：这里的path只需要修改build里面的，dev勿动，否则本地开发报错

但是这个方法只能解决我静态资源路径的问题，不能解决背景图片路径问题，打包后如果我的域名下多了一个层级，比如http://2222.com/wenjianjia/，背景会以 static 为跟目录，读取文件。

例如： background: url(../../../../static/image/nj_bg.jpg)
读取会变成 : background: url(http://2222.com/static/image/nj_bg.jpg)
这样就会报错了……

解决方法：

修改webpack.prod.conf.js文件里面的css路径，不用修改utils.js文件，最后的结果是app.000.css 会和 index.html 同级，但是成功解决掉了我的问题。

     filename: utils.assetsPath('../[name].[contenthash].css'), // 更换为
     // filename: utils.assetsPath('css/[name].[contenthash].css'),

参考地址：
https://github.com/vuejs-templates/webpack/issues/208