Nuxt.js 實際應用：Vue.js 伺服器端渲染框架

建立 Nuxt.js 項目

首先，請確保您已經安裝了 Node.js 和 YARN 或 NPM。然後，透過命令列建立一個新的 Nuxt.js 專案：

在建立過程中，您可以選擇是否需要UI框架、預處理器等選項，並根據需要進行設定。

目錄結構

Nuxt.js遵循特定的目錄結構，部分關鍵目錄如下：

• .nu​​xt/：該目錄是自動產生的，包含編譯後的程式碼。一般不需要直接修改。
• asset/：存放未編譯的靜態資源，如CSS、JavaScript、圖片等。 Nuxt.js 將在建置期間處理這些資源。
• Components/：儲存可以在應用程式的不同部分重複使用的自訂 Vue 元件。
• layouts/：定義頁面的佈局。可以有一個預設佈局或多個特定佈局。
• page/：每個檔案對應一個路由，檔案名稱就是路由名。動態路由用方括號[]表示。
• middleware/: 放置自訂中間件，可以在頁面渲染前後執行邏輯。
• plugins/: Vue.js 插件的自訂入口檔案。
• static/：不做任何處理，直接複製到建置輸出目錄，常用於存放robots.txt或favicon.ico等
• store/：Vuex 狀態管理目錄，儲存 actions、mutations、getters 以及整個 store 的入口檔案。
• nuxt.config.js：Nuxt.js設定文件，用於自訂專案設定。
• package.json：專案依賴和腳本配置。
• yarn.lock 或 npm.lock：記錄專案依賴的準確版本，以確保不同環境下依賴的一致性。

頁面渲染

在pages/目錄下建立一個index.vue檔。這是應用程式的主頁：

Nuxt.js頁面渲染的過程分為兩個主要階段：伺服器端渲染（SSR）和客戶端渲染（CSR）。以下是Nuxt.js頁面渲染的詳細步驟：

初始化：

使用者在瀏覽器中輸入URL並向伺服器發送請求。

伺服器收到請求後，開始處理。

路線解析度：

Nuxt.js 使用 nuxt.config.js 中的路由設定（如果存在）或自動從pages/目錄產生路由。

辨識對應的頁面文件，如pages/index.vue或pages/about.vue。

資料預取：

Nuxt.js 在頁面元件中尋找 asyncData 或 fetch 方法（如果存在）。

這些方法將在伺服器端運行，以從 API 或其他資料來源取得資料。

取得到資料後，會序列化並注入到頁面範本中

模板渲染：

Nuxt.js 使用 Vue.js 的渲染引擎將元件和預先取的資料轉換為 HTML 字串。
HTML 字串包含客戶端所需的所有初始數據，內嵌在 <script> 中。 JSON 格式的標籤。 </script>

返回 HTML：

伺服器將產生的 HTML 回應傳回客戶端（瀏覽器）。

客戶端初始化：

瀏覽器收到 HTML 後，開始解析並執行內嵌 JavaScript。
Nuxt.js 用戶端程式庫 (nuxt.js) 已載入並初始化。

客戶端渲染：

客戶端程式庫接管渲染，建立 Vue.js 實例，並將資料從內嵌 JSON 注入到 Vue 實例中。
頁面完成初始渲染，使用者可以看到完整的頁面內容。
此時，頁面是互動的，使用者可以觸發事件並進行導航。

後續導航：

當使用者導覽到其他頁面時，Nuxt.js 使用客戶端路由（Vue Router）進行無刷新跳轉。
如果新頁面需要數據，則 asyncData 或 fetch 方法將在用戶端運行，獲取新數據並更新視圖。

SSG（靜態站點產生）：

在開發之外，您可以使用 nuxtgenerate 指令產生靜態 HTML 檔案。

每個頁面都將預先渲染為一個單獨的 HTML 文件，其中包含所有必要的資料和資源。

使用非同步數據

asyncData 方法是 Nuxt.js 獨有的，可讓您在伺服器上預取資料並在客戶端上重複使用它。在上面的範例中，我們只是更改了 message 的值，但在實際應用中，您可能會在這裡呼叫 API 來取得資料。

中介軟體

中介軟體（Middleware）是一個功能，讓你在路由改變之前和之後執行特定的邏輯。中間件可以在全域、頁面層級或版面配置層級使用，以處理驗證、資料預載、路由防護等任務。

1. 全域中介軟體

全域中間件在 nuxt.config.js 檔案中配置，並影響應用程式中的所有頁面：

中介軟體通常位於middleware/目錄下，如middleware/globalMiddleware1.js：

2.頁面級中間件

頁面層級中間件僅影響特定頁面。在頁面元件中聲明中間件：

對應的中間件檔案位於middleware/目錄下，例如middleware/pageMiddleware.js：

3.版面級中間件

佈局級中間件與頁面層級類似，但它適用於所有使用版面的頁面。在版面元件中宣告中間件：

對應的中間件檔案位於middleware/目錄：

中介軟體上下文

中間件函數接收一個上下文物件作為參數，其中包含以下屬性：

• req（HTTP請求對象，僅在伺服器端有效）

• res（HTTP回應對象，僅在伺服器端有效）

• redirect（用於重定向的函數）

• app（Vue 實例）

• 路線（目前路線資訊）

• store（Vuex 商店，如果啟用）

• payload（如果有asyncData回傳的資料）

中介軟體可以依序執行，每個中間件都可以透過重定向功能決定是繼續執行鏈中的下一個中介軟體還是中斷路由。

動態路由

Nuxt.js支援動態路由，這對於處理部落格文章、使用者個人資料等具有動態ID的內容非常有用。在pages/目錄中建立動態路由文件，例如[id].vue:

這裡的[id]代表一個動態參數，asyncData會自動處理這個參數並取得對應ID的部落格文章。

版面
佈局可讓您定義全域或特定頁面的通用結構。在layouts/目錄下建立default.vue檔案：

預設情況下，所有頁面都將使用此佈局。如果你想為特定頁面設定不同的佈局，可以在頁面元件中指定：

外掛程式和函式庫整合
Nuxt.js 支援 Vue.js 插件，您可以在 nuxt.config.js 中設定：

然後在plugins/目錄下建立對應的文件，如vuetify.js：

配置與最佳化

Nuxt.js 設定檔 (nuxt.config.js)

nuxt.config.js 是 Nuxt 應用程式的主要設定文件，用於自訂應用程式的行為。以下是一些常用的配置：

• mode：設定應用程式的運作模式。可選值為'spa'（單頁應用）、'universal'（伺服器端渲染）和'static'（靜態生成）。預設為“通用”。
• head：設定頁面的部分，如標題、元資料、連結等
• css：指定全域CSS文件，可以是文件路徑數組
• build：配置建置過程，例如transpile、extractCSS、extend等。例如，您可以在此處新增Babel插件或調整Webpack設定。
• router：自訂路由配置，如基本路徑、模式等
• axios：配置axios模組，包括基礎URL、代理設定等
• plugins：註冊全域Vue插件，可以指定在客戶端或服務端載入。
• modules：載入外部模組，如@nuxtjs/axios、@nuxtjs/proxy等
• env：定義環境變量，該變數將在建置時注入到客戶端和伺服器中。

優化策略

• 非同步資料預取（asyncData/fetch）：使用asyncData或fetch方法在伺服器端預取數據，以減輕客戶端渲染的負擔。
• 程式碼分割：Nuxt.js 自動分割程式碼，確保只有在存取路由時才載入相關程式碼。
• 靜態網站產生（SSG）：使用 nuxtgenerate 指令產生靜態 HTML 文件，適合內容變更不頻繁的站點，提高載入速度和 SEO 友善性。
• 快取策略：使用ETag、Last-Modified等HTTP快取策略，減少重複要求。
• Vue.js 最佳化：確保Vue元件的最佳化，例如避免無用的watchers、使用v-once減少重新渲染等
• 圖片優化：使用正確的圖片格式（如WebP），確保圖片大小合適，使用延遲載入技術。
• Service Worker：整合 PWA 支援並使用 Service Worker 進行離線快取和推播通知。
• Tree Shaking：確保您的依賴項支援 Tree Shaking 以刪除未使用的程式碼。
• 分析與監控：使用 nuxt build --analyze 或整合第三方工具（如 Google Lighthouse）進行效能分析，持續監控應用效能。

靜態站點產生 (SSG)

Nuxt.js 的靜態網站產生（SSG）是透過 nuxtgenerate 指令實現的。該命令遍歷應用程式的路由並為每個路由產生一個預先渲染的 HTML 文件，該文件可以直接部署到任何靜態文件託管服務。以下是有關 SSG 的一些要點：

1。設定：在nuxt.config.js檔案中，可以設定generate選項來控制靜態產生的行為：

2。產生：執行npm rungenerate或yarngenerate來啟動靜態產生過程。 Nuxt.js會根據generate.routes中的設定產生對應的HTML檔。如果沒有明確定義，會自動掃描pages/目錄下的所有檔案產生路由。

3。資料預取：在頁面元件中，可以使用asyncData或fetch方法來預取資料。這些資料會在產生靜態頁面時注入到 HTML 中，這樣客戶端載入時頁面不需要額外的請求：

4。中間件處理：SSG過程中不會執行伺服器端中間件，因為SSG在沒有伺服器環境的情況下產生靜態檔案。因此，如果生成時需要執行一些邏輯，最好在 asyncData 或 fetch 中處理。

5。部署：產生的靜態檔案可以部署到任何靜態檔案託管服務，例如 Netlify、Vercel、GitHub Pages 或 AWS S3。這些服務通常不需要執行任何伺服器端程式碼，只需上傳產生的 dist 資料夾即可。

6。 SEO 優化：SSG 改進了 SEO，因為搜尋引擎爬蟲可以讀取預先渲染的 HTML 內容，而無需等待 JavaScript 執行。

7。動態路由：對於動態路由，Nuxt.js 將嘗試產生所有可能的組合。如果無法預測所有可能的動態路由，可以在generate.routes中手動指定，或使用generate.includePaths和generate.excludePaths進行控制。

8。 404頁：將generate.fallback設定為true將為未預先渲染的動態路由產生404頁面。當使用者存取這些路由時，Nuxt.js 會嘗試在客戶端渲染它們。

執行 nuxtgenerate 指令，Nuxt.js 將產生靜態 HTML 檔案。

驗證和錯誤處理

驗證

驗證通常涉及表單資料或 API 請求的輸入驗證。 Nuxt.js 本身不會直接提供驗證函式庫，但你可以整合第三方函式庫如 Vuelidate、vee-validate，或是使用 TypeScript 進行型別檢查。

使用 Vee-Validate
1.安裝：首先需要安裝vee-validate庫：

2。設定：在nuxt.config.js中加入Vue外掛程式配置：

3。建立插件：在plugins/vee-validate.js中配置Vee-Validate：

4。用法：在元件中使用 Vee-Validate 進行表單驗證：

錯誤處理

Nuxt.js 提供了多種處理錯誤的方法，包括全域錯誤處理和特定頁面的錯誤處理。

全域錯誤處理

• 自訂錯誤頁面：在layouts目錄下建立error.vue文件，用於自訂錯誤頁面佈局。
• 捕捉全​​域錯誤：在 nuxt.config.js 中設定 error 屬性來擷取全域錯誤：

頁面特定的錯誤處理

在頁面元件中，可以使用asyncData或fetch方法的try-catch結構來處理錯誤：

API 請求錯誤處理

對於API請求，如果使用@nuxtjs/axios模組，可以在請求攔截器中統一處理錯誤：

確保在 nuxt.config.js 中註冊此外掛程式。

Vue生態系整合

Vue路由器：

Nuxt.js 根據檔案結構自動為您的應用程式產生路由系統。路由配置通常不需要手動編寫，而是可以透過nuxt.config.js的router屬性進行擴充。

視圖：

Nuxt.js 自動建立一個 Vuex 儲存。在 store 目錄下，您可以建立模組化狀態、突變、操作和 getter。例如，建立一個 store/modules/users.js 檔案來管理使用者資料。

Vue 命令列介面：

Nuxt.js 提供了自己的建置工具，但它也是基於 Vue CLI 的。這表示您可以使用類似 Vue CLI 的命令列工具，例如 npx nuxtgenerate（靜態產生）或 npxnuxtbuild（建置應用程式）。

通天塔：

Nuxt.js 預設配置了 Babel 以支援最新的 JavaScript 功能。除非有特殊需要，通常不需要手動設定 Babel。

打字稿：

要使用 TypeScript，請在 nuxt.config.js 中設定 typescript: true ，Nuxt.js 將自動配置 TypeScript 支援。

ESLint：

為了檢查程式碼質量，您可以在專案中安裝 ESLint 並配置 .eslintrc.js。 Nuxt.js 提供 @nuxt/eslint-module 外掛程式來簡化整合。

Vue使用：

VueUse 是一個 Vue 使用案例庫，包含各種實用功能。要集成，請先安裝@vueuse/core，然後導入並使用元件中的功能。

Vue 插件：

可以透過nuxt.config.js中的plugins設定項目全域註冊Vue插件。例如，整合 Vue Toastify 來顯示通知：

使用 Nuxt.js 的工作流程

Nuxt.js 提供了完整的開發、建置和部署工作流程。使用 nuxt 命令啟動開發伺服器，使用 nuxt build 進行生產構建，使用 nuxt start 啟動生產伺服器，使用 nuxtgenerate 產生靜態檔案。

效能最佳化

1. 靜態產生（SSG）：使用nuxtgenerate指令產生預先渲染的HTML文件，可以大幅提高首屏載入速度，並且對SEO友善。

2. 程式碼拆分：Nuxt.js 預設會進行程式碼拆分，將應用程式分成多個小塊，只載入目前頁面所需的程式碼，減少初始載入量。

3. 延遲載入：對於大型應用程序，可以考慮延遲載入元件或模組，僅在需要時載入它們。您可以使用 或 結合非同步元件來實現這一點。

4. 最佳化資源：

• 圖片：使用正確的格式（例如WebP）、壓縮圖片、使用延遲載入（）或使用nuxt-圖片或nuxt- picture 元件。

• CSS：將 CSS 提取到單獨的檔案並減少內聯樣式。

• JS：使用 Tree Shaking 刪除未使用的程式碼。

1. 非同步資料預取：使用asyncData或fetch方法預先載入數據，確保渲染前資料準備就緒。

2. 伺服器端快取：使用 nuxt-ssr-cache 模組快取伺服器端渲染的結果，減少不必要的 API 呼叫。

3. HTTP快取：設定正確的快取頭（如Cache-Control），使用瀏覽器快取靜態資源。

4. 路由守衛：使用 beforeRouteEnter 等路由守衛以避免在不需要時載入資料。

5. 減少 HTTP 要求：結合多個 CSS 和 JS 文件，減少 HTTP 請求數量。

6. 最佳化API效能：最佳化後端接口，減少回應時間，使用分頁、過濾、快取策略。

7. 利用 CDN：在 CDN 上託管靜態資源，以加快全球用戶的載入速度。

8. 最佳化 Vuex 狀態管理：避免不必要的運算屬性和監聽器，以減少狀態變更的開銷。

9. 效能審計：使用Lighthouse、Chrome DevTools或其他效能審計工具定期檢查應用程式效能，並根據報告進行改進。

10. Service Worker：如果適用，整合 PWA 功能並使用 Service Worker 進行離線快取和資源預先載入。

11. 模組最佳化：選擇高效能的第三方模組，並確保它們針對SSR進行了最佳化。

以上是Nuxt.js 實際應用：Vue.js 伺服器端渲染框架的詳細內容。更多資訊請關注PHP中文網其他相關文章！