前端框架Vue（10）——如何將 vue-cli 項目打包壓縮（npm run build）後放到服務器

  當咱們將 vue 項目完成後，面臨的就是如何將項目進行打包上線，放到服務器中。我使用的是 vue-cli（simple） 腳手架，因此就講一下如何將項目進行打包，並放到 tomcat 上。
  若是是 vue-cli (非 simple 腳手架)，這篇文章可能有點幫助。地址連接：vue-cli 如何打包上線

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

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

一、項目目錄結構

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

二、webpack.config.js

這裏只是一小部分，由於這邊最關鍵的就是 publicPath,下面會提，這邊能夠解決靜態資源 404 沒法引入的問題。

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

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

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

四、如何放到服務器中。

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

而後將文件夾放到 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 注入依賴的形式進行安裝。

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

一、求助！Vue項目用Webpack打包後放到服務器上，但訪問是空白頁？弄了很久了也不知道什麼緣由

二、vue項目中，npm run build生成的index.html文件只有放在根目錄下打開才能生效，怎麼解決？

三、Vue應用部署到服務器的正確方式