开发环境中页面正常显示，打包后放到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就可以正常查看了
