在 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 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue 3 是 Vue.js 的最新版本，带来了许多新特性和改进，包括更快的性能、更小的包大小和更好的 TypeScript 支持。
Vue 3 的主要特性和优势
- 组合式 API (Composition API)：通过函数组合来组织逻辑代码，使得大型组件的代码更易于维护和重用。
- 性能提升：Vue 3 使用了 Proxy 对象来实现响应式系统，并优化了虚拟 DOM 算法，性能得到了显著提升。
- 更小的包大小：通过 Tree-shaking 技术，Vue 3 的核心库体积更小，加载更快。
- 更好的 TypeScript 支持：Vue 3 提供了更完善的 TypeScript 类型定义，使得使用 TypeScript 开发 Vue 应用的体验更佳。
- 改进的组件生命周期：新的生命周期钩子函数和 Setup 函数使得组件的逻辑更加清晰和易于管理。
使用 Vue 3，可以帮助开发者更高效地构建现代化的、响应迅速的 Web 应用。
使用 ServBay 集成环境创建和运行 Vue.js 项目
在这篇文章中，我们将使用 ServBay 提供的 Node.js 环境来创建并运行一个 Vue.js 项目。我们将利用 ServBay 的网站功能来配置 Web 服务器，并通过反向代理和静态文件服务来实现项目的本地访问。
前提条件
在开始之前，请确保您已完成以下准备工作：
- 安装 ServBay: 您已经在 macOS 上成功安装了 ServBay 本地开发环境。
- 安装 Node.js 软件包: 通过 ServBay 的软件包管理功能，安装了 Node.js 软件包。详细步骤请参考 在 ServBay 中安装和使用 Node.js。
创建 Vue.js 项目
初始化项目
首先，打开您的终端应用。ServBay 建议将网站项目存放在
/Applications/ServBay/www目录下。进入该目录，并使用npm create vue@latest命令初始化一个新的 Vue.js 项目。@latest确保您使用的是最新版本的 Vue CLI 或 create-vue 工具，通常会创建 Vue 3 项目。bashcd /Applications/ServBay/www npm create vue@latest1
2按照终端提示输入项目名称（建议命名为
servbay-vue-app），并根据您的项目需求选择是否添加 TypeScript, Vue Router, Pinia 等功能。示例配置如下：bash✔ 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 或 No1
2
3
4
5
6
7
8
9
10安装依赖
项目初始化完成后，进入新创建的项目目录
servbay-vue-app，并运行npm install命令安装项目所需的全部依赖包。bashcd servbay-vue-app npm install1
2
修改项目示例内容 (可选)
为了验证项目是否成功运行，您可以修改 src/App.vue 文件，将默认内容替换为简单的 "Hello ServBay!" 输出。
打开项目目录下的 src/App.vue 文件，将其内容修改为：
html
<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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
设置开发环境 (使用反向代理)
Vue 项目在开发模式下通常会启动一个本地开发服务器（基于 Vite 或 Webpack），该服务器提供热模块重载 (HMR) 等功能，方便开发。ServBay 可以通过反向代理将一个本地域名映射到这个开发服务器的地址和端口。
运行开发服务器
在项目根目录下，运行以下命令启动开发服务器。通过
--port参数指定一个端口（例如：8585），确保该端口未被其他程序占用。bashnpm run dev -- --port 85851终端会显示开发服务器已启动，并监听在指定的端口，例如
http://localhost:8585。配置 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 开发网站的更详细步骤，请参考 在 ServBay 中添加 Node.js 开发网站。
- 名字：
访问开发模式
确保 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 的静态网站功能轻松部署。
构建生产版本
在项目根目录下，运行以下命令进行生产构建：
bashnpm run build1构建过程会生成一个高度优化、打包好的静态文件集合，默认存放在项目根目录下的
dist文件夹中。设置静态文件服务
打开 ServBay 应用界面，导航到网站设置。添加一个新的网站配置，类型选择静态：
- 名字：
My first Vue production site(或其他易于识别的名称) - 域名：
servbay-vue-prod.servbay.demo(或您喜欢的其他.servbay.demo域名) - 网站类型：
静态 - 网站根目录：
/Applications/ServBay/www/servbay-vue-app/dist(指向您项目构建后生成的dist目录的绝对路径)
保存配置后，ServBay 会将其 Web 服务器配置为直接服务该
dist目录下的静态文件。- 名字：
访问生产模式
确保 ServBay 的 Web 服务器正在运行。打开浏览器，访问您为生产版本配置的域名
https://servbay-vue-prod.servbay.demo。您现在看到的是您 Vue 应用的生产构建版本，它已经过优化，可以提供最佳的加载性能。同样，通过 ServBay 的自定义域名和自动 SSL 功能，您可以安全地在本地预览您的生产环境网站。
注意事项
- 端口冲突: 如果
npm run dev命令指定的端口8585（或您选择的其他端口）已经被其他程序占用，命令会报错。请尝试更换一个未被占用的端口，并确保 ServBay 反向代理配置中的端口也随之更新。 - ServBay Web 服务器状态: 确保 ServBay 的 Web 服务器（Caddy 或 Nginx，取决于您的 ServBay 配置）正在运行，否则您将无法通过配置的域名访问网站。
- 域名解析: ServBay 会自动配置您在网站设置中添加的
.servbay.demo域名解析到本地 (127.0.0.1)。如果您使用了其他域名，可能需要手动修改系统的 hosts 文件或使用 ServBay 的 Hosts Manager 功能来确保本地解析正确。
总结
通过 ServBay，您可以在 macOS 上轻松搭建一个集成了 Node.js 环境的本地开发环境，并便捷地管理 Vue.js 项目的开发和生产部署。利用 ServBay 的网站功能，您可以快速配置反向代理来访问开发服务器，或直接服务生产构建的静态文件，同时享受到自定义域名和自动 SSL 证书带来的便利和安全性。这极大地简化了本地 Vue.js 项目的设置和工作流程。
