因为Apache默认只监听80端口且共用一个DocumentRoot，多个Vue项目并排放在htdocs下时，history模式刷新子路由会404；必须配合VirtualHost、.htaccess重写、publicPath/base配置及hosts映射才能正确路由。
为什么不能直接用 XAMPP 的 80 端口跑多个 Vue 打包项目
Apache 默认只监听一个端口（通常是 80），所有请求都进同一个 DocumentRoot；你把多个 dist 文件夹并排扔进 htdocs，比如 htdocs/project-a/ 和 htdocs/project-b/，看似能通过 http://localhost/project-a/ 访问，但只要用了 vue-router 的 history 模式，刷新页面或直接访问子路由（如 /user）就会 404——因为 Apache 根本不知道该返回哪个 index.html，它只会按真实路径找文件。
正确做法：用不同端口 + 独立 VirtualHost
不是改端口号那么简单，得让每个项目有自己专属的 DocumentRoot 和路由重写规则。关键步骤如下：
- 打开
XAMPP\apache\conf\httpd.conf，确认已取消注释：Include conf/extra/httpd-vhosts.conf - 在
httpd.conf中追加监听端口，例如：Listen 8081、Listen 8082（确保不被其他程序占用） - 编辑
XAMPP\apache\conf\extra\httpd-vhosts.conf，为每个项目写一个<VirtualHost *:8081>块，注意三点：
—DocumentRoot必须是绝对路径，且结尾不带斜杠（如C:/xampp/htdocs/project-a）
—ServerName可任意设（如project-a.local），但需同步写入系统hosts文件
—<Directory>块内必须含AllowOverride All，否则.htaccess不生效
.htaccess 和 vue.config.js 必须配对改
单页应用刷新 404 的根因是服务端没把所有路径都 fallback 到 index.html。仅靠 VirtualHost 不够，还得靠 .htaccess 重写，而它的行为又依赖前端构建配置：
- 在项目
dist目录下新建.htaccess，内容中RewriteBase必须和你部署的子路径一致，比如项目放在htdocs/project-a，就写RewriteBase /project-a/ -
vue.config.js中的publicPath必须匹配这个路径：publicPath: '/project-a/'（生产环境） -
router/index.js中的base也得同步：base: '/project-a/'，否则路由跳转会漏掉前缀 - 如果项目没放子目录而是独占端口（如
:8081），那publicPath和base都应设为'/'，.htaccess中RewriteBase也写/
容易被忽略的两个硬性条件
哪怕所有配置都对了，以下两点任一缺失都会导致白屏或资源 404：
立即学习“前端免费学习笔记（深入）”；
- Apache 的
mod_rewrite模块必须启用：检查httpd.conf中LoadModule rewrite_module modules/mod_rewrite.so这行是否取消注释 - Windows 系统 hosts 文件必须添加映射，例如：
127.0.0.1 project-a.local；否则浏览器根本不会把请求发给你的VirtualHost，而是走默认站点
端口本身不解决路由问题，真正起作用的是 VirtualHost + DocumentRoot + .htaccess + 前端三件套（publicPath/base/history 模式）的完整闭环。少一环，就卡在 404 或空白页上。
