XAMPP环境下多端口部署VuePress-php教程-PHP中文网

可行，但必须先用 vuepress build 生成静态文件，再通过 apache 多端口虚拟主机托管；不可直接接入 vuepress dev 服务，因其为独立 node 进程，与 apache 无关联。

xampp环境下多端口部署vuepress

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 中这行未被注释：

Include conf/extra/httpd-vhosts.conf

3. 编辑 C:\xampp\apache\conf\extra\httpd-vhosts.conf，追加：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

<virtualhost>
    ServerName localhost:8080
    DocumentRoot "C:/xampp/htdocs/docs-a"
    <directory>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </directory></virtualhost><p><virtualhost>
ServerName localhost:8081
DocumentRoot "C:/xampp/htdocs/docs-b"
<directory>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</directory></virtualhost></p>

⚠️ 注意点：

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></directory> 块里有 AllowOverride All（见上一节），否则 Apache 忽略该文件。

若不想用 .htaccess，也可把 rewrite 规则写进 <directory></directory> 块内（需启用 mod_rewrite）：

<directory>
    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