開發(fā)環(huán)境中頁面正常顯示，打包后放到tomcat服務(wù)器上頁面空白，頁面內(nèi)容不顯示。F12狀態(tài)下看到css和js文件路徑不對。針對打包爬坑特地整理了一下

1、配置項(xiàng)目引用文件問相對路徑；
2、引用js文件路徑錯(cuò)誤；
3、圖片路徑錯(cuò)誤；
4、背景圖片路徑錯(cuò)誤；
5、引用圖標(biāo)不顯示；
6、router-view中的內(nèi)容顯示不出來；

解決以上問題，需修改的地方：

1、config/index.js

build: {
    assetsPublicPath: './' // 修改為相對路徑
}

2、build/utils.js

if(options.extract){
    return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../' // 此處解決css中背景圖片路徑報(bào)錯(cuò)，作用是設(shè)置打包過程中提取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, //字體圖標(biāo)失效，將限制改大，大于字體文件大小
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
},

5、問題原因：
在沒有后端配合的情況下就打開路由history模式的時(shí)候(vue-router默認(rèn)hash模式——使用URL的hash來模擬一個(gè)完整的URL，于是當(dāng)URL改變時(shí)，頁面不會(huì)重新加載)，打包出來的文件也會(huì)是一片空白的情況，這里并不是說不能打開這個(gè)模式，這個(gè)模式需要后端設(shè)置的配合，詳情可以參考vue-router文檔

const router = new VueRouter({
  mode: 'history',//注釋掉這行代碼
  routes: [...]
})

修改保存后重新打包項(xiàng)目放到tomcat就可以正常查看了