當我們將 vue 專案完成後，面臨的就是如何將專案進行打包上線，放到伺服器中。我使用的是 vue-cli（simple） 腳手架，所以就講一下如何將專案進行打包，並放到 tomcat 上。

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

1、打包後將 dist 資料夾和 index.html 放到 tomcat，在瀏覽器中訪問時，出現空白頁，f12 提示 404。
2、打包好的靜態資源均是絕對路徑，無法引入進專案，也是 404。

1、專案目錄結構

這是打包後的，所以有 dist 資料夾，打包方式：npm run build。

2、webpack.config.js

這裡只是一小部分，因為這邊最關鍵的就是 publicPath,下面會提，這邊可以解決靜態資源 404 無法引入的問題。

3、npm run build 打包後的檔案。

npm run build 打包後生成一個 dist 資料夾，這裡面的目錄：

我對 webpack 打包工具的原理不是很清楚，所以資料夾應該生成什麼不是瞭解。我這邊是這樣子的。主要是一個主要的 build.js, 因為我們的 index.html 引入的就是這個 js 檔案。還有一些圖片檔案和 ElementUI 生成的 ttf 和 woff。

4、如何放到伺服器中。

接下來就是需要將生成的 dist 資料夾和 index.html 檔案放到伺服器中，只需要這兩個。首先我將這兩個檔案放在同一個資料夾中，我命名為 gas（隨意）。

然後將資料夾放到 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 的相對路徑進行引用。

[圖片上傳失敗...(image-871829-1543051015369)]

程式碼中的 icon.ico 就是我手動將 icon 圖示放到 dist 資料夾中，然後按照對應的引用路徑進行引用。其他的 css 和 js 引用一樣。

7、使用腳手架進行run build打包，靜態資源404問題

config/index.js

assetsPublicPath: '/',

改成

assetsPublicPath: './',

8、待解決的問題：

1、在專案中，使用了 ElementUI 框架，但是在打包放到伺服器中後，發現按鈕樣式變了，所有的 padding 失效，所有我只能自己手動進行新增樣式。

2、在 index.html 中如果引入 link css檔案時，還是沒辦法引入相對路徑，所以我將 css 樣式都放到了各自的元件中的 style 中了，其他的一般都是用 npm 注入依賴的形式進行安裝。

9、網上搜索到的相關問題和解決方法。

1、求助！Vue專案用Webpack打包後放到伺服器上，但訪問是空白頁？弄了好久了也不知道什麼原因

2、vue專案中，npm run build生成的index.html檔案只有放在根目錄下開啟才能生效，怎麼解決？

3、Vue應用部署到伺服器的正確方式