使用 ServBay 建立與運行 Vue.js 專案

Vue.js 是一款廣受歡迎、用於構建使用者介面的漸進式 JavaScript 框架。它容易入門、靈活且效能出眾，尤其適合建立單頁應用（SPA）。ServBay 作為強大的本地 Web 開發環境，提供便利的 Node.js 支援，適用於 macOS 和 Windows，成為理想的 Vue.js 開發平台。

本指南將詳盡介紹如何運用 ServBay 的整合環境，從零開始建立 Vue.js 專案，並於開發模式及生產模式下透過 ServBay 進行存取。

什麼是 Vue.js？

Vue.js 是一個用來構建使用者介面的漸進式 JavaScript 框架。與其他大型框架不同，Vue 採用自底向上的漸進式設計。其核心庫只著重在視圖層，極易上手，也方便與第三方函式庫或既有專案整合。Vue 3 是最新版本，加入了諸多新功能與改進，包括更快效能、更小體積與強化 TypeScript 支援。

Vue 3 主要特色與優勢

• 組合式 API (Composition API)： 透過函式組合來組織邏輯，使大型元件的程式碼更易維護及重複利用。
• 效能提升： Vue 3 採用 Proxy 實作響應式系統，並優化虛擬 DOM 演算法，效能大幅提升。
• 體積更小： 透過 Tree-shaking 技術，核心庫更精簡，載入速度更快。
• TypeScript 強化支援： Vue 3 提供完善的類型定義，提升以 TypeScript 撰寫 Vue 應用的體驗。
• 元件生命週期優化： 新增的生命週期鈎子與 Setup 函式，讓元件邏輯更清晰易管理。

採用 Vue 3，能協助開發者高效率打造現代化、反應迅速的網頁應用。

利用 ServBay 建立與運行 Vue.js 專案

本文將介紹如何使用 ServBay 提供的 Node.js 環境來建置與執行 Vue.js 專案。您可以利用 ServBay 的網站功能設定 Web 伺服器，藉由反向代理及靜態檔案服務進行本地專案存取。

事前準備

開始前，請先完成以下事項：

1. 安裝 ServBay: 已成功安裝 ServBay 本地開發環境。
2. 安裝 Node.js 套件: 使用 ServBay 的套件管理功能安裝 Node.js 套件。詳細步驟請參考 於 ServBay 安裝及使用 Node.js。

建立 Vue.js 專案

1. 初始化專案

   首先，請開啟終端機。ServBay 建議將網站專案存放於預設目錄。進入該目錄並輸入 npm create vue@latest 指令，初始化全新 Vue.js 專案。@latest 代表使用最新版 Vue CLI 或 create-vue 通常會建立 Vue 3 專案。

   macOS:

   cd /Applications/ServBay/www
   npm create vue@latest

   Windows:

   cd C:\ServBay\www
   npm create vue@latest

   請依照終端提示輸入專案名稱（建議命名為 servbay-vue-app），並根據專案需求選擇是否加入 TypeScript、Vue Router、Pinia 等功能。範例建議如下：

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No # 依需求選擇 Yes 或 No
   ✔ Add JSX Support? … No # 依需求選擇 Yes 或 No
   ✔ Add Vue Router for Single Page Application development? … Yes # 建議選 Yes
   ✔ Add Pinia for state management? … No # 依需求選擇 Yes 或 No
   ✔ Add Vitest for Unit testing? … No # 依需求選擇 Yes 或 No
   ✔ Add an End-to-End Testing Solution? … No # 依需求選擇 Yes 或 No
   ✔ Add ESLint for code quality? … Yes # 建議選 Yes
   ✔ Add Prettier for code formatting? … Yes # 建議選 Yes
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # 依需求選擇 Yes 或 No

2. 安裝相依套件

   專案初始化完畢後，進入新建的 servbay-vue-app 目錄，執行 npm install 安裝所有必要套件：

   cd servbay-vue-app
   npm install

修改專案範例內容（可選）

為了驗證專案是否成功運行，您可以修改 src/App.vue 檔案，把預設內容改為簡單的 "Hello ServBay!" 顯示。

請開啟專案目錄下的 src/App.vue，並將內容更新如下：

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>這是運行於 ServBay 的 Vue.js 應用。</p>
  </div>
</template>

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

設定開發環境（使用反向代理）

Vue 專案於開發模式下通常會啟動本地開發伺服器（以 Vite 或 Webpack 為基礎），具備熱模組重載（HMR）等便利功能。ServBay 能透過反向代理將本地域名指向開發伺服器的位址與埠號。

1. 啟動開發伺服器

   進入專案根目錄後，執行下列指令啟動開發伺服器。可用 --port 指定埠號（如：8585），請確保此埠未被其他程式使用。

   npm run dev -- --port 8585

   終端上會顯示伺服器已啟動並監聽指定埠號，例如 http://localhost:8585。

2. 設定 ServBay 網站反向代理

   開啟 ServBay 應用介面，進入網站設定。新增一個網站，類型選擇反向代理：

   • 名稱：My first Vue dev site（或助於識別的自訂名稱）
   • 域名：servbay-vue-dev.servbay.demo（或其他喜好的 .servbay.demo 域名）
   • 網站類型：反向代理
   • 代理目標 IP：127.0.0.1
   • 代理目標埠號：8585（須與開發伺服器使用的埠號一致）

   儲存後，ServBay 會自動更新 Web 伺服器（Caddy 或 Nginx）設定，將存取 servbay-vue-dev.servbay.demo 的請求代理至 http://127.0.0.1:8585。

   更多關於於 ServBay 設定 Node.js 開發網站的詳細步驟，請參考 新增 Node.js 開發網站。

3. 存取開發環境

   請確保 ServBay Web 伺服器已啟動。開啟瀏覽器並造訪剛剛設定的域名 https://servbay-vue-dev.servbay.demo。

   受惠於 ServBay 支援本地域名自動 SSL 憑證配置（藉由 ServBay User CA 或 ServBay Public CA），您可直接透過 HTTPS 安全存取本地開發網站，並與實際生產環境更為貼近。SSL 詳細設定請參考 配置 SSL 憑證教學。

   現在，您應能在瀏覽器中看到 Vue 應用於開發模式下執行，並且在程式碼修改時享受熱重載的效率。

建置生產版本並部署（使用靜態網站服務）

當 Vue.js 專案開發完成、準備部署時，需產生優化的生產版本。此版本通常為一組靜態檔（HTML、CSS、JavaScript 等），可透過 ServBay 靜態網站功能迅速部署。

1. 建置生產版本

   於專案根目錄執行下列指令進行生產建置：

   npm run build

   建置流程會生成最佳化的靜態檔案，預設儲存於專案目錄下 dist 資料夾。

2. 設定靜態檔案服務

   開啟 ServBay 介面，進入網站設定。新增網站並將類型設為靜態：

   • 名稱：My first Vue production site（或自訂易識別名稱）
   • 域名：servbay-vue-prod.servbay.demo（或其他 .servbay.demo 域名）
   • 網站類型：靜態
   • 網站根目錄：設定為建置後 dist 資料夾的絕對路徑：
     • macOS: /Applications/ServBay/www/servbay-vue-app/dist
     • Windows: C:\ServBay\www\servbay-vue-app\dist

   儲存後，ServBay 會將 Web 伺服器設定為直接服務該 dist 目錄內的靜態檔案。

3. 存取生產環境

   請確保 ServBay Web 伺服器運作正常。開啟瀏覽器，訪問為生產版本設定的域名 https://servbay-vue-prod.servbay.demo。

   您現在看到的是已最佳化的 Vue 生產建置版本，具備最佳載入效能。透過 ServBay 的自訂域名與自動 SSL 功能，您可安全地於本地預覽生產網站。

注意事項

• 埠號衝突： 若執行 npm run dev 所用的埠號 8585（或其他指定埠）已被他程式佔用，會導致錯誤。請換用未被佔用的埠號，並同步更新 ServBay 反向代理其設定。
• ServBay Web 伺服器運作狀態： 請確認 ServBay 的 Web 伺服器（Caddy 或 Nginx，依您設定而定）已啟動，否則將無法透過設定域名存取網站。
• 域名解析： ServBay 會自動將於網站設定中新增的 .servbay.demo 域名解析到本機（127.0.0.1）。如使用其他域名，可能需手動編輯系統 hosts 檔或利用 ServBay Hosts Manager 確保本地解析正確。

結論

利用 ServBay，您可於 macOS 與 Windows 輕鬆建置整合 Node.js 的本地開發環境，並高效管理 Vue.js 專案的開發與生產部署。運用 ServBay 的網站功能，能快速配置反向代理存取開發伺服器，直接服務生產建置的靜態檔案，同時獲得自訂域名與自動 SSL 憑證的安全便利，大幅簡化本地 Vue.js 專案的環境設置與開發流程。