目錄

介紹

本地項目部署

?nginx部署

云端服務(wù)器部署

---

介紹

對于Vue項目而言，Nginx可以輕松地配置來處理SPA的路由問題，即對于所有未定義的路徑請求返回index.html，這樣前端路由機制就可以接管URL的處理。此外，Nginx支持反向代理設(shè)置，方便將前端請求轉(zhuǎn)發(fā)至后端API，簡化開發(fā)流程。同時，它還能提供基本的安全防護，如限制訪問、防止惡意攻擊等。結(jié)合其穩(wěn)定性與低資源消耗特性，Nginx是部署前端Vue項目的理想選擇。

本地項目部署

使用express書寫一個前端服務(wù)器,將前端項目部署到該服務(wù)器上

首先進行前端項目構(gòu)建

啟動express服務(wù)

?點擊服務(wù)器路徑

可以看到頁面加載出來了,但是一旦刷新頁面就會直接空白頁,且應(yīng)該顯示的接口數(shù)據(jù)也沒有顯示出來

?這里是由于前端路由出現(xiàn)的問題

問題分析：前端項目的路由，通常分為兩種工作模式，分別為：

1. hash模式

hash 值又稱錨點，通常用于指定網(wǎng)頁中的某個位置，例如下面的網(wǎng)址：

央視網(wǎng)_世界就在眼前，其中的#SUBD1605080062959435就是 hash 值，hash 值只在客戶端（如瀏覽器）中使用，是不會帶給服務(wù)器的，所以使用 hash 模式時，不存在刷新 404 問題。

1. history模式

history 去掉了URL中的#號，可以讓應(yīng)用的URL看起來更美觀，帶來的問題就是刷新時，會將前端路由攜帶給后端，而后端沒有對應(yīng)資源的匹配，就出現(xiàn)了 404 問題。

?重新構(gòu)建,將調(diào)整為hash模式后進行構(gòu)建后的dist重新放入前面的服務(wù)其中,重啟測試

可以看到重新刷新頁面時不會再有空白頁的問題了? ?但是這種方案并不是太好,因為路勁中會攜帶#并不美觀

可以讓服務(wù)器在收到未配置的GET路由時，都返回index.html即可。
最終其實是把 url 中的 path，交給了前端路由去處理，具體配置如下：

也可以借助connect-history-api-fallback中間件完成配置

安裝中間件

npm i connect-history-api-fallback

使用connect-history-api-fallback可以讓配置更靈活，比如/login臨時不需要作為前端路由處理，就可以按照如下方式配置

?重啟測試

可以看到頁面刷新后沒有變空白頁且路徑也沒有#

來看下異步請求沒有發(fā)送出去的問題

脫離腳手架后，就沒有了代理服務(wù)器，無法轉(zhuǎn)發(fā)請求到【提供數(shù)據(jù)】的服務(wù)器。

如何解決？—— 在 Node 服務(wù)器中借助http-proxy-middleware中間件配置代理，具體配置如下：

?重啟測試

可以看到頁面沒有再報錯404請求,并且拿到了接口數(shù)據(jù)

?nginx部署

Nginx（發(fā)音為“engine-x”）是一款高性能的 HTTP 服務(wù)器和反向代理服務(wù)器，同時也是一個 IMAP/POP3/SMTP 代理服務(wù)器。Nginx 最初由 Igor Sysoev 編寫，于 2004 年發(fā)布。它以其高性能、高穩(wěn)定性、豐富的功能集和低系統(tǒng)資源消耗而聞名，主要功能有：

1. 反向代理
2. 負載均衡
3. 靜態(tài)內(nèi)容服務(wù)
4. HTTP/2 支持
5. SSL/TLS 支持
6. 高速緩存

使用nginx當(dāng)做服務(wù)器進行部署前端服務(wù)

打開nginx目錄

進入配置目錄

?書寫配置

啟動nginx

?然后瀏覽器中輸入localhost:8097

可以訪問到,但是出現(xiàn)了和之前一樣的刷新界面空白或者接口請求失敗的情況

使用nginx進行404頁面配置和請求轉(zhuǎn)發(fā)

重啟nginx

?可以看到數(shù)據(jù)和頁面都回歸正常了

云端服務(wù)器部署

在實際開發(fā)中都是需要將項目部署到云端服務(wù)器中,部署之后使用公網(wǎng)ip進行訪問

首先準(zhǔn)備一個linux服務(wù)器,或者直接使用虛擬機進行部署

安裝nginx

?使用xftp進行服務(wù)器文件連接

找到var目錄新建dist文件夾,將之前構(gòu)建的dist文件夾下的靜態(tài)資源全部上傳到這里

?來到服務(wù)器中nginx的安裝目錄下

找到nginx配置文件,將前面nginx的配置直接粘貼到這里,記得修改靜態(tài)文件路徑

?啟動nginx

源碼

武天/vue3_study