vue打包项目显示空白，图片不显示

开发环境中页面正常显示，打包后放到tomcat服务器上页面空白，页面内容不显示。F12状态下看到css和js文件路径不对。针对打包爬坑特地整理了一下

1、配置项目引用文件问相对路径；
2、引用js文件路径错误；
3、图片路径错误；
4、背景图片路径错误；
5、引用图标不显示；
6、router-view中的内容显示不出来；

解决以上问题，需修改的地方：

1、config/index.js

build: {
    assetsPublicPath: './' // 修改为相对路径
}

2、build/utils.js

if(options.extract){
    return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../' // 此处解决css中背景图片路径报错，作用是设置打包过程中提取css的方法
    })
}

3、build/webpack.prod.conf.js

output: {
    publicPath: './', // 添加这一行配置
}

4、build/webpack.base.conf.js

{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 100000, //字体图标失效，将限制改大，大于字体文件大小
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
},

5、问题原因：
在没有后端配合的情况下就打开路由history模式的时候(vue-router默认hash模式——使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载)，打包出来的文件也会是一片空白的情况，这里并不是说不能打开这个模式，这个模式需要后端设置的配合，详情可以参考vue-router文档

const router = new VueRouter({
  mode: 'history',//注释掉这行代码
  routes: [...]
})

修改保存后重新打包项目放到tomcat就可以正常查看了