怎么在 Apache 部署静态单页应用-Apache-PHP中文网

apache部署spa需让非资源请求fallback至index.html：启用mod_rewrite，通过.htaccess或主配置添加重写规则，确保rewritecond排除真实文件和目录，rewriterule将其他请求指向/index.html，并验证静态资源不被误捕获。

怎么在 apache 部署静态单页应用

在 Apache 上部署静态单页应用（SPA），核心是解决前端路由（如 Vue Router 的 history 模式）导致的 404 问题——用户直接访问 /user/123 这类非根路径时，Apache 默认找不到对应物理文件，返回 404。关键不在“放文件”，而在“让所有非资源请求都 fallback 到 index.html”。

确保构建输出为静态文件

先确认你的 SPA 已正确构建（如运行 npm run build）：生成的是一组纯 HTML、JS、CSS 文件，没有服务端逻辑。输出目录（如 dist/）里必须包含 index.html，且其他资源路径（js/、css/）能被正确引用。

若使用 Vue CLI，检查 vue.config.js 中的 publicPath（旧版叫 assetsPublicPath）是否匹配部署路径。根部署填 '/'；若部署在子路径如 https://example.com/app/，则设为 '/app/'，并同步配置路由 base: '/app/'
React（Create React App）需设置 homepage 字段或 PUBLIC_URL 环境变量，与实际访问路径一致

配置 Apache 支持 history 路由回退

Apache 需将除真实文件（.js、.css、图片等）外的所有请求，都指向 index.html，由前端路由接管。推荐两种方式，任选其一：

Apache Superset Dashboard and SQL Exploration Skill

Apache Superset 是一个广泛采用的开源 BI 平台，用于 SQL 探索、图表构建和仪表板交付。当代理需要查询仓库数据、组装仪表板或使用成熟的分析界面解释指标而不是临时笔记本代码时，此技能非常有用。

下载

方法一：启用 .htaccess（推荐用于共享主机或无 root 权限）
在项目根目录（即 index.html 所在目录）新建 .htaccess 文件，内容如下：
```
RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]
```
确保 Apache 启用了 mod_rewrite，且主配置中对应目录的 AllowOverride 设为 All（否则 .htaccess 不生效）

方法二：修改主配置（更高效，适用于有服务器管理权限）
编辑虚拟主机或主配置文件（如 /etc/httpd/conf/httpd.conf 或 /etc/apache2/sites-available/000-default.conf），在 <directory></directory> 块内添加重写规则：

<directory><br>    Options Indexes FollowSymLinks<br>    AllowOverride None<br>    Require all granted<br>    RewriteEngine On<br>    RewriteBase /<br>    RewriteRule ^index\.html$ - [L]<br>    RewriteCond %{REQUEST_FILENAME} !-f<br>    RewriteCond %{REQUEST_FILENAME} !-d<br>    RewriteRule . /index.html [L]<br></directory>

注意：把 /var/www/html 替换为你实际的网站根目录路径

检查基础服务与权限

确保 Apache 本身正常运行，并能读取你的文件：

启动并启用服务：systemctl start httpd（CentOS/RHEL）或 systemctl start apache2（Ubuntu/Debian），再执行 systemctl enable httpd 或 systemctl enable apache2
确认文件放在正确目录（默认是 /var/www/html），且属主和权限允许 Apache 进程读取（通常 chown -R $USER:apache /var/www/html 或 chmod -R 644 /var/www/html/*，目录加 755）
防火墙开放 80 端口：firewall-cmd --permanent --add-service=http + firewall-cmd --reload（CentOS）；Ubuntu 可用 ufw allow 'Apache Full'

验证与调试

部署后测试几个关键路径：

直接访问根路径 http://your-domain/ —— 应正常加载首页
刷新一个子路由页面，如 http://your-domain/user/profile —— 不应报 404，而应由前端路由渲染
访问一个真实存在的静态资源，如 http://your-domain/js/app.js —— 应返回 JS 文件内容，而非 index.html（说明重写规则未误伤资源）
查看 Apache 错误日志：tail -f /var/log/httpd/error_log（CentOS）或 /var/log/apache2/error.log（Ubuntu），快速定位配置语法或权限问题