跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

XAMPP配置多端口实现前端单页面应用部署

直接配置Apache需同时满足三点:DocumentRoot路径权限正确、Directory块中配置Require all granted、SPA项目启用mod_rewrite并设AllowOverride All,三者缺一不可。 能直接配,但默认配置会卡在 403 错误或路由刷新 404,核心是
DocumentRoot
权限 +
Directory
块的
Require all granted
+ SPA 的重写规则三者缺一不可。 监听端口必须显式添加到
httpd.conf
Apache 不会自动响应未声明的端口。只改
httpd-vhosts.conf
是没用的。 打开
C:\xampp\apache\conf\httpd.conf
找到
Listen 80
行,在其下方新增你要用的端口,比如:
Listen 8080
Listen 8081
确保端口未被其他程序占用(
netstat -ano | findstr :8080
可查) Windows 防火墙若启用,需放行对应端口(否则本机可访问、局域网不可)
VirtualHost
必须带
Require all granted
和正确
Directory
路径 即使端口开了,
DocumentRoot
对应目录若没显式授权,Apache 默认拒绝所有请求,返回 403。 编辑
C:\xampp\apache\conf\extra\httpd-vhosts.conf
每个
块里,
DocumentRoot
必须是绝对路径,结尾不加斜杠(
C:/xampp/htdocs/my-vue-app
✅,
C:/xampp/htdocs/my-vue-app/
❌)
块内必须包含:
Require all granted
(旧版 Apache 2.2 用
Order allow,deny
+
Allow from all
,XAMPP 7.4+ 默认是 2.4,只认
Require
) 别漏掉
Include conf/extra/httpd-vhosts.conf
这行——检查
httpd.conf
里它前面有没有
#
Vue/React 等 SPA 必须加 URL 重写,否则刷新页面 404 前端 路由是客户端的,
/user/profile
这种路径 Apache 根本找不到对应文件,必须把所有非静态资源请求都 fallback 到
index.html
。 面向设计的AXUI前端框架表单 面向设计的AXUI前端框架表单是一款包含表格、列表、弹窗等的AXUI前端框架表单下载。 下载 立即学习 “ 前端免费学习笔记(深入) ”; 在对应项目的
Directory
块内,加上:
Options FollowSymLinks
AllowOverride All
在项目根目录(如
C:\xampp\htdocs\my-vue-app
)新建
.htaccess
文件,内容为:
RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]
确保
httpd.conf
中
LoadModule rewrite_module modules/mod_rewrite.so
已启用(去掉前面的
#
) 重启前务必验证配置语法,否则 Apache 启动失败 XAMPP 控制面板点 Start 没反应?大概率是某处拼写错误或路径不存在。 命令行进入
C:\xampp\apache\bin
,执行:
httpd.exe -t
输出
Syntax OK
才代表配置无硬错 如果报错,例如
Invalid command 'Require'
,说明 Apache 版本太低或模块未加载;
Cannot load modules/mod_rewrite.so
就去开
mod_rewrite
修改
hosts
文件不是必须项(
localhost:8080
可直连),但加了自定义域名(如
app.local
)后,必须在
C:\Windows\System32\drivers\etc\hosts
里加
127.0.0.1 app.local
最容易被忽略的是
AllowOverride All
和
.htaccess
的组合——没它,
RewriteRule
根本不生效;而很多人只改了
VirtualHost
却忘了在
Directory
里放开覆盖权限。

相关文章