先來描述一下期間遇到的問題有哪些：
1、打包后將 dist 文件夾和 index.html 放到 tomcat，在瀏覽器中訪問時，出現空白頁，f12 提示 404。
2、打包好的靜態資源均是絕對路徑，無法引入進項目，也是 404。
1、項目目錄結構
這是打包后的，所以有 dist 文件夾，打包方式：npm run build
2、webpack.config.js
3、npm run build 打包后的文件。
npm run build 打包后生成一個 dist 文件夾，這里面的目錄
4、如何放到服務器中。
1.接下來就是需要將生成的 dist 文件夾和 index.html 文件放到服務器中，只需要這兩個。首先我將這兩個文件放在同一個文件夾中，我命名為 gas（隨意）。
2.然后將文件夾放到 tomcat 中，我將文件夾放到 tomcat 的 webapps 文件夾目錄下：
ok 部署完成,啟動 tomcat，你會發現顯示一個空白頁，一些靜態資源都是 404。
5、解決空白頁和靜態資源無法引入的問題。
1、首先空白頁的問題，可以重 f12 中看出來都是絕對路徑的原因，而我們打包后，應該的引入路徑是相對路徑，這時我們需要的是修改 index.html 頁面。
看一下沒改之前的：
看我 /dist/build.js 引用的是絕對路徑，這就導致了在 tomcat 去訪問 index.html 頁面時，報404。我們需要將路徑變成相對路徑 ./dist/build/。多一個點，很關鍵。好了到這里應該主頁面可以顯示了。
但是你會發現，我的靜態資源，我的圖片（不包括 img 形式的引入），例如我在 css 中 background:url() 的圖片顯示404。
2、解決靜態資源失效的問題
這就需要修改我們的 webpack.config.js 中的 publicPath 了，默認的 vue-cli 腳手架環境搭建好后，publicPath 是這樣的：
可以看到我們的路徑是： /dist/。所以這時候我們如果打開頁面，靜態資源的路徑都會是這樣子的，並且報錯404：
http://10.0.0.181:8088/dist/bg.png?fe9b889cea51978538ce352593be0573顯然可以看出和我們想要的路徑不一致，上面我貼出來的在 tomcat 的文件目錄中我將 dist 和 index.html 都放進了一個 gas 的文件夾中。所以正確的路徑應該是這樣的：
http://10.0.0.181:8088/gas/dist/bg.png?fe9b889cea51978538ce352593be0573看出區別了嗎！
解決：
所以我需要改變一下 webpack.config.js 中的輸出路徑 publicPath: /gas/dist/。將最外層的文件夾路徑加進去，這樣就可以將靜態資源引入進項目了。
ok,到現在為止，最主要的兩個問題解決了，一個是 index.html 空白頁，另一個是 靜態資源路徑不正確的問題。
6、index.html 頁面中的link 和 srcipt 引用的資源失效問題：
原因還是路徑的地址不對：
妥協的解決方法是：將自己引用的資源手動放到打包出來的 dist 文件夾內，然后在 index.html 中按照 dist 的相對路徑進行引用。
代碼中的 icon.ico 就是我手動將 icon 圖標放到 dist 文件夾中，然后按照對應的引用路徑進行引用。其他的 css 和 js 引用一樣。
7、待解決的問題：
1、在我的項目中，使用了 ElementUI 框架，但是在打包放到服務器中后，發現按鈕樣式變了，所有的 padding 失效，所有我只能自己手動進行添加樣式。
2、在我的 index.html 中如果引入 link css文件時，還是沒辦法引入相對路徑，所以我將 css 樣式都放到了各自的組件中的 style 中了，其他的一般都是用 npm 注入依賴的形式進行安裝。