一.問題描述
使用vue-cli創建的的項目，開發過程中無任何問題，在開發完成後準備打包上線，此時打包也無任何問題。然而打包後使用Tomcat發佈時卻出現了白屏問題。
二.原因探索
1.打開控制檯
查看network，顯示的都是各類資源404的報錯，那很顯然是資源路徑錯誤。注意，下圖中的資源路徑沒有拼接項目名。（使用本地Tomcat測試）
2.資源路徑嘗試
爲了確認第一步的猜想，我們可以手動加上項目名來訪問資源文件，然後很順利的發現資源找到了。
三.解決方案
1. 快速方案
使用過tomcat的小夥伴應該都記得tomcat中內置的ROOT項目，我們可以直接使用localhost/ip +端口號打開，無需輸入項目名。因此，直接將打包後的文件改名爲ROOT即可解決路徑不對的問題。
2. 完美方案
根目錄中創建vu.config.js文件，示例代碼如下
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/newScreen/' // 打包後發佈文件名
: '/' // 開發環境相對路徑
}
對應以上代碼，打包後的包名必須爲newScreen。
3.其他
相對前兩種肯定較爲複雜，但是我們已經知道了問題出現的原因，那之後的解決方案也很簡單，說白了就是將項目的默認訪問根目錄變爲當前項目名下，請各位小夥伴自行探索這裏不再嶴書。
- 後期遇到較爲優雅的解決方案還會更新
tip：vue-cli:版本爲4.1.1
如遇到vue-cli版本不同導致解決方案不生效的問題歡迎給我留言