在 macOS 上使用 ServBay 建立與執行 Vue.js 專案

Vue.js 是一個廣受歡迎、專注於用戶介面建置的漸進式 JavaScript 框架，擁有簡易上手、高度彈性與優異效能等特點，特別適合開發單頁應用（SPA）。ServBay 則是一套功能強大的本地 Web 開發環境，它提供便利的 Node.js 支援，讓 macOS 平台成為進行 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 技術，Vue 3 的核心庫更小巧，載入更快速。
• 強化 TypeScript 支援：提供完整的 TypeScript 類型定義，讓以 TypeScript 開發 Vue 應用變得更加順暢。
• 改良元件生命週期：嶄新生命週期勾子與 Setup 函式，讓元件邏輯更清晰好管理。

藉由使用 Vue 3，開發者能更高效構建現代化、高反應性的 Web 應用程式。

使用 ServBay 集成環境建立與執行 Vue.js 專案

本文將以 ServBay 之 Node.js 環境為基礎，帶您一步步建立並執行 Vue.js 專案，同時善用 ServBay 的網站功能配置 Web 伺服器，並透過反向代理與靜態檔案服務方式實現本地存取。

前置條件

開始前，請先確認您已完成下列準備：

1. 安裝 ServBay: 您已於 macOS 上成功安裝 ServBay 本地開發環境。
2. 安裝 Node.js 軟體包: 透過 ServBay 的軟體包管理功能，安裝好 Node.js 軟體包。詳細步驟請參見 在 ServBay 中安裝與使用 Node.js。

建立 Vue.js 專案

1. 初始化專案

   首先，開啟您的終端機。ServBay 建議將網站專案存放於 /Applications/ServBay/www 目錄。請移動至該目錄，並執行 npm create vue@latest 指令以初始化新 Vue.js 專案，@latest 可確保同步取得最新 Vue CLI 或 create-vue 工具，預設會建立 Vue 3 專案。

   cd /Applications/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>This is a Vue.js app running via ServBay.</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

   終端會顯示開發伺服器已經啟動並監聽 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 開發網站。

3. 訪問開發模式

   請確保 ServBay 的 Web 伺服器已啟動，然後開啟瀏覽器，前往剛設置的域名 https://servbay-vue-dev.servbay.demo。

   由於 ServBay 支援本地域名自動配置 SSL 憑證（可用 ServBay User CA 或 ServBay Public CA），因此可直接用 HTTPS 安全瀏覽本地開發網站，與生產環境體驗一致。SSL 設定詳見 在 ServBay 中為網站配置 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 域名）
   • 網站類型：靜態
   • 網站根目錄：/Applications/ServBay/www/servbay-vue-app/dist（指定專案 build 完成的 dist 目錄完整路徑）

   儲存後，ServBay 會將該 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 上輕鬆搭建 Node.js 本地開發環境，並高效率管理 Vue.js 專案的開發與生產部署。善用 ServBay 的網站功能，不僅能迅速設定反向代理給予開發伺服器存取權，也可一鍵服務生產靜態檔、支援自訂網域及自動 SSL 憑證，大幅簡化本地 Vue.js 專案配置與開發工作流程。