使用 ServBay 建立並運行 Nuxt.js 專案

什麼是 Nuxt.js？

Nuxt.js 是一個基於流行的 Vue.js 框架所構建的開源框架，專門用於打造現代化、高效能的 Web 應用程式。它簡化了許多繁複的設定，讓開發者能更專注於實際業務邏輯。Nuxt.js 特別適合構建伺服器端渲染（SSR）應用，同時也具備強大的靜態網站生成（SSG）能力，是打造內容豐富、SEO 友善網站與應用的理想工具。

Nuxt.js 的主要特色與優勢

伺服器端渲染（SSR）：在伺服器上預先渲染 Vue 頁面，加快首屏載入速度、提升使用者體驗，並增強搜尋引擎對內容的抓取能力，有助於 SEO 排名。
靜態網站生成（SSG）：於建構階段產生完整靜態 HTML 檔案，效能極佳，部署簡便且不需伺服器運行成本，非常適合如部落格或文件站這類內容較少變動的網站。
自動代碼拆分（Automatic Code Splitting）：Nuxt.js 根據路由自動拆分 JavaScript 代碼，讓用戶訪問頁面時僅載入必要內容，大幅優化應用效能。
基於檔案系統的路由（File-system Routing）：只需在 pages 目錄內建立 .vue 檔案，即自動生成對應路由，簡化路由管理。
高度模組化（Modular）：擁有豐富的模組生態，輕鬆整合各式功能與第三方服務（如 Axios、PWA 支援、內容管理系統整合等）。
約定優於設定（Convention over Configuration）：透過預設目錄架構與命名規則，大幅減少繁雜設定。
極佳開發體驗：支援熱模組重載（HMR）、錯誤回報等功能，提升開發效率。

借助這些優勢，Nuxt.js 讓建構複雜、高效能且 SEO 友好的 Web 應用變得既高效又輕鬆。

在 ServBay 中設定與運行 Nuxt.js 專案

本指南將說明如何利用 ServBay 強大的本地開發環境，尤其是其 Node.js 軟體包與網站管理功能，來建立、配置與運行 Nuxt.js 專案。我們會分別介紹如何於 ServBay 設定開發模式（以反向代理方式）與生產模式（使用靜態檔案服務）。

前置條件

開始之前，請確認您已符合下列條件：

已成功安裝 ServBay 應用程式。
已於 ServBay 中安裝並啟用了 Node.js 軟體包。可於 ServBay 控制台之「軟體包」分頁進行查閱及安裝。
具備 Node.js、npm（或 Yarn/pnpm）與基礎終端指令的操作經驗。
（建議）安裝一款程式編輯器，如 VS Code。

建立 Nuxt.js 專案

我們將利用 create-nuxt-app 腳手架工具快速初始化一個 Nuxt.js 專案。

開啟終端並進入 ServBay 網站根目錄
ServBay 預設的網站根目錄為 /Applications/ServBay/www，建議將本地開發專案存放於此。請開啟您的終端程式，並執行下列指令進入這個目錄：
bash
```
cd /Applications/ServBay/www
```
1

初始化新的 Nuxt.js 專案

運行 npx create-nuxt-app 指令，初始化一個名為 servbay-nuxt-app 的新專案。npx 為 npm 5.2+ 版本自帶的工具，可直接執行 npm 套件的指令，無需全域安裝。

bash

npx create-nuxt-app servbay-nuxt-app

執行後，請依據終端提示進行設定。設定內容可根據需求選擇，以下示範一組配置流程：

bash

? Project name: servbay-nuxt-app
? Programming language: JavaScript
? Package manager: Npm         # 選擇套件管理器，推薦 Npm 或 Yarn
? UI framework: None          # 依據需求選擇 UI 框架
? Nuxt.js modules: Axios      # 依據需求選擇 Nuxt.js 模組
? Linting tools: ESLint       # 依據需求選擇 Lint 工具
? Testing framework: None     # 依需求選擇測試框架
? Rendering mode: Universal (SSR / SSG) # 選擇渲染模式，Universal 可支援 SSR 與 SSG
? Deployment target: Server (Node.js hosting) # 選擇部署目標，Server 適合本地開發或 Node.js 伺服器部署
? Development tools: jsconfig.json (Recommended for VS Code) # 設定開發工具，視需求選擇

安裝專案依賴
進入新建立的專案目錄，並用您選擇的套件管理器安裝所需依賴：
bash
```
cd servbay-nuxt-app
npm install
# 或使用 Yarn: yarn install
# 或使用 pnpm: pnpm install
```
1
2
3
4
請耐心等待依賴安裝完成。

修改首頁輸出內容

為了方便確認設定成果，我們將修改首頁檔案，輸出一段簡單文字。

開啟 pages/index.vue 檔案
請用您的程式編輯器開啟專案下的 pages/index.vue。

修改檔案內容

請將內容更改為下列代碼，即可在頁面上顯示 "Hello ServBay!"：

html

<template>
  <div>
    <h1>Hello ServBay!</h1>
  </div>
</template>

<script>
export default {
  name: 'IndexPage'
}
</script>

<style scoped>
div {
  text-align: center;
  margin-top: 50px;
  font-family: sans-serif;
}
h1 {
  color: #333;
}
</style>

此處新增了 scoped 屬性到 style 標籤，確保樣式僅作用於當下元件，並美化了畫面顯示效果。

在 ServBay 運行開發模式

Nuxt.js 的開發伺服器一般會啟動在本機的特定埠號。若要透過 ServBay 自訂網域、SSL 憑證及統一的 80/443 埠訪問，我們會運用 ServBay 的網站功能，設置反向代理。

啟動 Nuxt.js 開發伺服器
在專案根目錄下執行下列指令來啟動 Nuxt.js 開發伺服器，這裡指定埠號 8585，亦可自行更換為其他未占用埠號。
bash
```
cd /Applications/ServBay/www/servbay-nuxt-app
npm run dev -- --port 8585
# 或使用 Yarn: yarn dev --port 8585
# 或使用 pnpm: pnpm run dev --port 8585
```
1
2
3
4
成功啟動後，開發伺服器一般會在 http://localhost:8585 提供服務。請保持此終端視窗開啟，以便伺服器持續運作。
設定 ServBay 網站（反向代理）
開啟 ServBay 控制台，切至「網站」分頁，並點擊左下角「+」按鈕新增一組網站設定：
- 名稱 (Name)：輸入易辨識名稱，如 Nuxt.js Dev Site (Proxy)。
- 網域 (Domain)：輸入您欲在瀏覽器訪問的自訂網域，例如 nuxt-dev.servbay.demo。建議使用 .servbay.demo 結尾以呼應 ServBay 品牌。
- 網站類型 (Website Type)：選取 反向代理 (Reverse Proxy)。
- IP 位址 (IP Address)：填寫 127.0.0.1，即本地主機位址。
- 埠號 (Port)：輸入剛剛 Nuxt.js 開發伺服器啟動用的埠號，例如 8585。
完成設定後點擊「新增」或「儲存」。ServBay 會自動更新設定並立即生效。
如需進一步了解如何在 ServBay 新增 Node.js 開發網站（通常以反向代理設置），可參考新增 Node.js 開發型網站。
訪問開發模式網站
開啟您的網頁瀏覽器，訪問剛設定的網域，如 https://nuxt-dev.servbay.demo。
經過 ServBay 反向代理，您可直接透過 ServBay 管理的網域及 HTTPS 埠訪問 Nuxt.js 開發伺服器。ServBay 會自動為您產生並配置 SSL 憑證（由 ServBay User CA 核發，請確認您的系統已信任該 CA），讓您在開發環境同樣能使用 HTTPS；這對於模擬正式環境、測試 Service Workers 或需要安全上下文的功能來說非常有用。

建構並運行生產版本

當 Nuxt.js 專案開發完成，準備部署（或需在本地模擬正式環境預覽）時，可建構專案的生產版本。若選擇 Universal 模式且欲產生靜態網站，通常會執行 nuxt generate（或經由 npm run export 腳本觸發）。

建構生產版本與產生靜態檔案
在專案根目錄執行下列指令：npm run build 會編譯專案，npm run export 依據路由產生靜態 HTML 檔案於輸出目錄（預設為 dist）。
bash
```
cd /Applications/ServBay/www/servbay-nuxt-app
npm run build
npm run export
# 或使用 Yarn: yarn build && yarn export
# 或使用 pnpm: pnpm build && pnpm run export
```
1
2
3
4
5
建構結束後，您會在專案內看到名為 dist 的資料夾，內含所有產生的靜態檔案。
設定 ServBay 網站（靜態檔案服務）
開啟 ServBay 控制台，切至「網站」分頁，並點擊左下方「+」新增網站：
- 名稱 (Name)：輸入如 Nuxt.js Prod Site (Static) 的名稱。
- 網域 (Domain)：填寫您希望用作正式版預覽的自訂網域，例如 nuxt-prod.servbay.demo。
- 網站類型 (Website Type)：選擇 靜態 (Static)。
- 網站根目錄 (Website Root)：輸入 Nuxt.js 產生靜態檔案的目錄，根據上述步驟應為 /Applications/ServBay/www/servbay-nuxt-app/dist。
完成後按「新增」或「儲存」，ServBay 會自動更新設定並套用。
訪問正式模式網站
開啟瀏覽器，訪問設定中的網域，例如 https://nuxt-prod.servbay.demo。
ServBay 採用高效能 Web 伺服器（依設定為 Caddy 或 Nginx）直接提供 dist 目錄的靜態檔案。這是最佳化的靜態內容服務方式，能夠提供極致快速的內容讀取。同樣，您將受惠於 ServBay 免費的 SSL 憑證及自訂網域支援。

總結

透過 ServBay，您能輕鬆管理 Nuxt.js 專案的本地開發與預覽環境。利用 ServBay 的 Node.js 軟體包運行開發伺服器，並以其網站功能設置反向代理，使您能在自訂網域及 HTTPS 下進行開發調試。開發完成後，建構專案並產生靜態檔案，再透過 ServBay 的靜態網站型態，進行高效能的本地預覽。這套工作流程充分發揮了 ServBay 的便利與強大，讓前端專案的本地開發與測試更高效、易管理。希望本指南能協助您更有效地依靠 ServBay 來進行 Nuxt.js 開發！

使用 ServBay 建立並運行 Nuxt.js 專案 ​

什麼是 Nuxt.js？ ​

Nuxt.js 的主要特色與優勢 ​

在 ServBay 中設定與運行 Nuxt.js 專案 ​

前置條件 ​

建立 Nuxt.js 專案 ​

修改首頁輸出內容 ​

在 ServBay 運行開發模式 ​

建構並運行生產版本 ​

總結 ​