可行，但必须先用 vuepress build 生成静态文件，再通过 Apache 多端口虚拟主机托管；不可直接接入 vuepress dev 服务，因其为独立 Node 进程，与 Apache 无关联。
VuePress 本身是静态站点生成器，不依赖后端服务，但若你希望在 XAMPP 的 Apache 上托管多个 VuePress 站点（比如不同文档项目、测试环境、预发布分支），并用不同端口区分访问，**可行，但必须绕过 VuePress 的开发服务器（vuepress dev），只部署构建后的静态文件**。直接用 vuepress dev 启动的本地服务（如 http://localhost:8080）和 XAMPP 的 Apache 是两套独立进程，无法共用端口或被 Apache 反向代理到 VuePress dev server——除非你手动配 mod_proxy，但那已脱离“XAMPP 多端口托管静态站”的本意。
为什么不能直接把 vuepress dev 接入 XAMPP 端口
VuePress 开发服务器是基于 webpack-dev-server 或 Vite 的，它监听的是自己的 Node.js 进程端口（默认 8080），和 Apache 完全无关。XAMPP 的 Listen 指令只对 Apache 自身生效，不会转发请求给另一个进程。强行让 Apache ProxyPass 到 localhost:8080 虽技术上可做，但会引入额外故障点（Node 进程挂掉、跨域、热更新失效、404 路由 fallback 失效），且违背 VuePress “静态部署”设计初衷。
所以真正可靠的做法是：先 vuepress build 出 .vuepress/dist 目录，再把该目录作为纯静态资源，交给 Apache 通过多端口虚拟主机托管。
配置 Apache 多端口虚拟主机托管 VuePress 构建产物
假设你有两个 VuePress 项目：
立即学习“前端免费学习笔记（深入）”；
-
my-docs-a构建后路径：C:/xampp/htdocs/docs-a -
my-docs-b构建后路径：C:/xampp/htdocs/docs-b
按以下步骤操作：
1. 修改 C:\xampp\apache\conf\httpd.conf，在已有 Listen 80 行下方添加：
Listen 8080 Listen 8081
2. 确保 httpd.conf 中这行未被注释：
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
Include conf/extra/httpd-vhosts.conf
3. 编辑 C:\xampp\apache\conf\extra\httpd-vhosts.conf，追加：
<VirtualHost *:8080>
ServerName localhost:8080
DocumentRoot "C:/xampp/htdocs/docs-a"
<Directory "C:/xampp/htdocs/docs-a">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
<p><VirtualHost *:8081>
ServerName localhost:8081
DocumentRoot "C:/xampp/htdocs/docs-b"
<Directory "C:/xampp/htdocs/docs-b">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
</VirtualHost>⚠️ 注意点：
-
AllowOverride All必须启用，否则 VuePress 的客户端路由（如/guide/）在刷新时会 404（Apache 默认不解析.htaccess，而 VuePress 的history模式依赖它 fallback 到index.html） - 如果
docs-a或docs-b是子目录（比如docs-a/guide/），需在config.js中设置base: '/docs-a/'，否则资源路径（CSS/JS）会 404 - Windows 路径中反斜杠
\必须换成正斜杠/，否则 Apache 启动失败
解决 VuePress 静态资源 404 和路由刷新 404
即使配置了多端口，访问 http://localhost:8080/guide/ 仍可能报 404，这是因为：
- Apache 尝试找物理路径
/guide/下的index.html，但 VuePress 的guide/是前端路由，真实文件只在根目录index.html - 需要 Apache 把所有非资源请求 fallback 到
index.html
做法是在每个 VuePress 项目的 dist 根目录下放一个 .htaccess 文件（内容如下）：
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]同时确保 httpd-vhosts.conf 中对应 <Directory> 块里有 AllowOverride All（见上一节），否则 Apache 忽略该文件。
若不想用 .htaccess，也可把 rewrite 规则写进 <Directory> 块内（需启用 mod_rewrite）：
<Directory "C:/xampp/htdocs/docs-a">
Options Indexes FollowSymLinks
AllowOverride None
Require all granted
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</Directory>重启 Apache 后仍打不开？重点检查三处
常见卡点不是配置语法错，而是权限与路径细节：
- Windows 防火墙或杀毒软件拦截了
8080/8081端口（尤其某些国产安全软件会静默封禁非标准端口） -
DocumentRoot路径末尾**不要加斜杠**："C:/xampp/htdocs/docs-a"✅，"C:/xampp/htdocs/docs-a/"❌（Apache 会报 syntax error） - VuePress 构建前没设
base，导致 CSS/JS 请求地址是http://localhost:8080/assets/xxx.css（正确），但如果部署在子路径如http://localhost:8080/docs-a/，就必须在config.js写base: '/docs-a/'，否则资源 404 - 修改完配置后，XAMPP 控制面板里要点击
Apache → Stop再Start，仅 “Restart” 有时不重载httpd-vhosts.conf
多端口本质是 Apache 的基础能力，难点不在“能不能”，而在 VuePress 的静态特性与 Apache 的路径/重写规则之间是否对齐——尤其是 base、.htaccess、AllowOverride 这三者必须协同生效，漏一不可。
