vue ---webpack 打包上線

 先來描述一下期間遇到的問題有哪些：

　　一、打包後將 dist 文件夾和 index.html 放到 tomcat，在瀏覽器中訪問時，出現空白頁，f12 提示 404。
　　二、打包好的靜態資源均是絕對路徑，沒法引入進項目，也是 404。

一、項目目錄結構

　　這是打包後的，因此有 dist 文件夾，打包方式：npm run build

二、webpack.config.js

　　

三、npm run build 打包後的文件。

　　npm run build 打包後生成一個 dist 文件夾，這裏面的目錄

　　

四、如何放到服務器中。

　　1.接下來就是須要將生成的 dist 文件夾和 index.html 文件放到服務器中，只須要這兩個。首先我將這兩個文件放在同一個文件夾中，我命名爲 gas（隨意）。

　　

　　2.而後將文件夾放到 tomcat 中，我將文件夾放到 tomcat 的 webapps 文件夾目錄下：

　　

　　ok 部署完成,啓動 tomcat，你會發現顯示一個空白頁，一些靜態資源都是 404。

五、解決空白頁和靜態資源沒法引入的問題。

　　一、首先空白頁的問題，能夠重 f12 中看出來都是絕對路徑的緣由，而咱們打包後，應該的引入路徑是相對路徑，這時咱們須要的是修改 index.html 頁面。

　　　　看一下沒改以前的：

　　　　

　　　　看我 /dist/build.js 引用的是絕對路徑，這就致使了在 tomcat 去訪問 index.html 頁面時，報404。咱們須要將路徑變成相對路徑 ./dist/build/。多一個點，很關鍵。好了到這裏應該主頁面能夠顯示了。

　　　　可是你會發現，個人靜態資源，個人圖片（不包括 img 形式的引入），例如我在 css 中 background:url() 的圖片顯示404。

　　二、解決靜態資源失效的問題

　　　　這就須要修改咱們的 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 空白頁，另外一個是 靜態資源路徑不正確的問題。

　　

六、index.html 頁面中的link 和 srcipt 引用的資源失效問題：

　　緣由仍是路徑的地址不對：

　　妥協的解決方法是：將本身引用的資源手動放到打包出來的 dist 文件夾內，而後在 index.html 中按照 dist 的相對路徑進行引用。

　　

　　代碼中的 icon.ico 就是我手動將 icon 圖標放到 dist 文件夾中，而後按照對應的引用路徑進行引用。其餘的 css 和 js 引用同樣。

　　

七、待解決的問題：

　　一、在個人項目中，使用了 ElementUI 框架，可是在打包放到服務器中後，發現按鈕樣式變了，全部的 padding 失效，全部我只能本身手動進行添加樣式。

　　二、在個人 index.html 中若是引入 link css文件時，仍是沒辦法引入相對路徑，因此我將 css 樣式都放到了各自的組件中的 style 中了，其餘的通常都是用 npm 注入依賴的形式進行安裝。