Apache通过.htaccess配置RewriteEngine与RewriteCond排除真实文件和目录,再用RewriteRule将所有非资源请求重写为index.html,使Vue Router等前端路由接管History模式下的深层路径,避免刷新返回404。

Apache URL 重写实现单页面应用(SPA)的 History 模式,核心是让所有非静态资源请求都 fallback 到 index.html,由前端 JavaScript(如 Vue Router、React Router)接管路由逻辑。否则用户直接访问 /about 或刷新该页面时,Apache 会返回 404。
确保服务器支持并启用 mod_rewrite
检查 Apache 是否已加载重写模块:
- 打开
C:\xampp\apache\conf\httpd.conf(Windows)或/etc/apache2/mods-enabled/rewrite.load(Linux) - 确认存在
LoadModule rewrite_module modules/mod_rewrite.so且未被注释 - 确保站点目录允许重写:在
<Directory>块中设置AllowOverride All
配置 .htaccess 实现统一入口
在项目根目录(与 index.html 同级)创建或编辑 .htaccess 文件,写入以下规则:
Apache Superset 是一个广泛采用的开源 BI 平台,用于 SQL 探索、图表构建和仪表板交付。当代理需要查询仓库数据、组装仪表板或使用成熟的分析界面解释指标而不是临时笔记本代码时,此技能非常有用。
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]
说明:
-
RewriteEngine On启用重写引擎 - 两个
RewriteCond排除真实存在的文件(!-f)和目录(!-d),避免影响 CSS、JS、图片等静态资源 -
RewriteRule ^ index.html [QSA,L]将所有匹配路径重写为index.html,QSA保留原始查询参数,L表示终止后续规则
验证前端路由是否正常工作
History 模式依赖浏览器 History API,需确认前端代码已正确配置:
- Vue Router 中启用
history: createWebHistory()(Vue 3) - React Router 中使用
createBrowserRouter并确保不使用HashRouter - 手动测试:点击导航按钮后 URL 变化但页面不刷新;F5 刷新
/user/123应仍加载index.html并由 JS 渲染对应视图
常见问题排查
若仍出现 404 或 403 错误,重点检查:
- Apache 是否监听对应端口(
httpd.conf中Listen 8080等) - 虚拟主机配置中
<Directory>块是否含Require all granted(Apache 2.4+) -
.htaccess文件是否位于正确目录,且文件名无拼写错误(注意开头的点) - 浏览器控制台是否有跨域或资源加载失败(如
main.js404),这可能是路径配置错误而非重写问题

















