vue項目打包傳遞至服務器步驟詳解

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

如果是 vue-cli (非 simple 腳手架)，這篇文章可能有點幫助。地址鏈接：vue-cli 如何打包上線

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

1、打包后將 dist 文件夾和 index.html 放到 tomcat，在瀏覽器中訪問時，出現(xiàn)空白頁，f12 提示 404。
2、打包好的靜態(tài)資源均是絕對路徑，無法引入進項目，也是 404。

1、項目目錄結構

這是打包后的，所以有 dist 文件夾，打包方式：npm run build。

2、webpack.config.js

這里只是一小部分，因為這邊最關鍵的就是 publicPath,下面會提，這邊可以解決靜態(tài)資源 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，你會發(fā)現(xiàn)顯示一個空白頁，一些靜態(tài)資源都是 404。

5、解決空白頁和靜態(tài)資源無法引入的問題。

1、首先空白頁的問題，可以重 f12 中看出來都是絕對路徑的原因，而我們打包后，應該的引入路徑是相對路徑，這時我們需要的是修改 index.html 頁面。

看一下沒改之前的：

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

但是你會發(fā)現(xiàn)，我的靜態(tài)資源，我的圖片（不包括 img 形式的引入），例如我在 css 中 background:url() 的圖片顯示404。

2、解決靜態(tài)資源失效的問題

這就需要修改我們的 webpack.config.js 中的 publicPath 了，默認的 vue-cli 腳手架環(huán)境搭建好后，publicPath 是這樣的：

可以看到我們的路徑是： /dist/。所以這時候我們?nèi)绻蜷_頁面，靜態(tài)資源的路徑都會是這樣子的，并且報錯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

看出區(qū)別了嗎！

解決：

所以我需要改變一下 webpack.config.js 中的輸出路徑 publicPath: /gas/dist/。將最外層的文件夾路徑加進去，這樣就可以將靜態(tài)資源引入進項目了。

ok,到現(xiàn)在為止，最主要的兩個問題解決了，一個是 index.html 空白頁，另一個是 靜態(tài)資源路徑不正確的問題。

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

原因還是路徑的地址不對：

妥協(xié)的解決方法是：將自己引用的資源手動放到打包出來的 dist 文件夾內(nèi)，然后在 index.html 中按照 dist 的相對路徑進行引用。

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

7、待解決的問題：

1、在我的項目中，使用了 ElementUI 框架，但是在打包放到服務器中后，發(fā)現(xiàn)按鈕樣式變了，所有的 padding 失效，所有我只能自己手動進行添加樣式。

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

8、網(wǎng)上搜索到的相關問題和解決方法。

1、求助！Vue項目用Webpack打包后放到服務器上，但訪問是空白頁？弄了好久了也不知道什么原因

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

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

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關注Gxl網(wǎng)其它相關文章！

推薦閱讀：

PHP共享內(nèi)存使用與信號控制使用詳解

PHP快速實現(xiàn)數(shù)組去重方法

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com