切換語言為:簡體

Vue3專案history模式部署404處理,使用 historyApiFallback 解決 SPA 路由問題

  • 爱糖宝
  • 2024-11-02
  • 2042
  • 0
  • 0

在現代的 web 開發中,單頁面應用(SPA)變得越來越流行。這類應用通常依賴於客戶端路由來提供流暢的使用者體驗,但在伺服器端,我們需要一種方式來確保這些路由能正常工作

這裏,我們將使用vue-router不同的歷史模式 | Vue Router官方推薦的 historyApiFallback 中介軟體,以及它如何幫助解決 SPA 路由問題。

解決的問題

當我們透過vue-router,history模式打包部署上線的時候,

const router = createRouter({
  history: createWebHistory(),
  // 對於無法匹配的頁面統一返回404頁面
  routes: [{ path: '/:pathMatch(.*)', component: NotFoundComponent }],
})

可能遇到使用者訪問http://192.168.78.17:3000/awfwfaeageege頁面,會出現報錯,而不是返回前端指定404頁面

Vue3專案history模式部署404處理,使用 historyApiFallback 解決 SPA 路由問題

而我們想要實現的效果是這樣,返回404頁面

Vue3專案history模式部署404處理,使用 historyApiFallback 解決 SPA 路由問題

這時候就可以使用express中介軟體historyApiFallback

當你訪問 http://192.168.78.17:3000/awfwfaeage 時,整個流程的工作原理如下:

1. 客戶端請求
  • 使用者在瀏覽器中輸入 http://192.168.78.17:3000/awfwfaeage,瀏覽器發起一個 HTTP 請求到伺服器。

2. 伺服器處理請求
  • 伺服器收到這個請求後,會檢查該請求的 URL /awfwfaeage

  • 如果伺服器沒有找到與該 URL 對應的檔案或路由,它通常會返回一個 404 錯誤。這意味著伺服器不知道如何處理這個請求。

3. 返回 index.html
  • 在使用 Vue Router 的歷史模式下,通常需要配置伺服器以處理所有路由請求,重定向到 index.html。這樣即使 URL 不對應於某個檔案,伺服器仍然能夠返回前端的單頁應用程式。

  • 如果伺服器配置不當,仍然會返回 404 頁面,而不是返回 index.html

4. 前端處理
  • 如果伺服器返回了 index.html,瀏覽器會載入這個 HTML 檔案。Vue 應用會啟動並初始化。

  • Vue Router 在初始化時會檢查當前的 URL(即 /awfwfaeage),並嘗試找到與之匹配的路由。

5. 路由匹配
  • 如果沒有定義對應 /awfwfaeage 的路由,Vue Router 會根據設定返回一個 404 元件或頁面,提示使用者沒有找到對應的內容。

總結流程
  1. 使用者請求 URL:/awfwfaeage

  2. 伺服器未找到檔案或路由,返回 404 錯誤。

  3. 如果伺服器配置錯誤,返回的不是 index.html,而是一個 404 頁面。

  4. 如果返回了 index.html,Vue 應用啟動,但由於沒有匹配的路由,最終呈現 404 頁面。

什麼是 historyApiFallback

historyApiFallback 是一個用於 Node.js 的中介軟體,常與 Express 框架結合使用。它的主要作用是攔截所有請求,確保未找到的路由返回主 HTML 檔案(通常是 index.html,注意是返回檔案,而不是重定向),從而允許前端路由接管。

傳統路由的挑戰

在傳統的多頁面應用中,每一個 URL 通常都有對應的伺服器端處理邏輯。但在 SPA 中,所有的路由都是由客戶端的 JavaScript 處理的。當用戶直接訪問一個深層路由(例如 /some-route)時,伺服器可能找不到相應的資源,這將導致 404 錯誤。

historyApiFallback 的工作原理

  1. 攔截請求:當用戶請求一個不對應於靜態檔案的 URL,historyApiFallback 會攔截這個請求。

  2. 返回 HTML 檔案:中介軟體會返回指定的 HTML 檔案,而不是進行重定向。這樣,瀏覽器的位址列保持使用者訪問的路徑,前端 JavaScript 則可以根據這個路徑來渲染相應的內容。

示例程式碼

以下是如何在 Express 應用中使用 historyApiFallback 的示例:

javascriptCopy Codeconst express = require('express');
const historyApiFallback = require('connect-history-api-fallback');

const app = express();

// 使用 historyApiFallback 中介軟體
app.use(historyApiFallback());

// 靜態檔案服務
app.use(express.static('public'));

// 其他 API 路由
app.get('/api/some-endpoint', (req, res) => {
  res.json({ message: 'Hello World!' });
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

在這個例子中,當用戶訪問 /some-route 時,historyApiFallback 會攔截這個請求並返回 index.html。接下來,前端的 JavaScript 可以根據當前 URL 進行相應的路由處理。

前端附加說明

這有一個注意事項。你的伺服器將不再報告 404 錯誤,因為現在所有未找到的路徑都會顯示你的 index.html 檔案。爲了解決這個問題,你應該在你的 Vue 應用程式中實現一個萬能的路由來顯示 404 頁面。

const router = createRouter({
  history: createWebHistory(),
  // 對於無法匹配的頁面統一返回404頁面
  routes: [{ path: '/:pathMatch(.*)', component: NotFoundComponent }],
})

優勢總結

使用 historyApiFallback 有幾個明顯的優勢:

  • 簡化路由管理:不需要為每個路由設定伺服器端處理,前端可以完全控制路由。

  • 提高使用者體驗:使用者在位址列中看到的 URL 與他們訪問的內容一致,避免了 404 錯誤頁面的困擾。

  • 適配 SPA:非常適合使用 React、Vue 或 Angular 等框架構建的單頁面應用。

結論

historyApiFallback 中介軟體是支援單頁面應用路由的重要工具,它確保了 SPA 在使用者直接訪問特定路徑時能正確地返回主 HTML 頁面。透過這種方式,我們可以讓前端路由更順暢,同時提升使用者體驗。如果你正在開發一個 SPA,強烈建議考慮使用這個中介軟體來管理路由。


作者:red潤
連結:https://juejin.cn/post/7432320733648207913

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.