讲师中心 微信公众号
AI工具推荐 视频效率加速

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

冬婷大大_1829

冬婷大大_1829

发布时间:2026-06-20 07:02:36

|

701人浏览过

|

来源于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 Dashboard and SQL Exploration Skill

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

下载
  • 方法一:启用 .htaccess(推荐用于共享主机或无 root 权限)
    在项目根目录(即 index.html 所在目录)新建 .htaccess 文件,内容如下:
    RewriteEngine On<br>RewriteBase /<br>RewriteRule ^index\.html$ - [L]<br>RewriteCond %{REQUEST_FILENAME} !-f<br>RewriteCond %{REQUEST_FILENAME} !-d<br>RewriteRule . /index.html [L]

    确保 Apache 启用了 mod_rewrite,且主配置中对应目录的 AllowOverride 设为 All(否则 .htaccess 不生效)
  • 方法二:修改主配置(更高效,适用于有服务器管理权限)
    编辑虚拟主机或主配置文件(如 /etc/httpd/conf/httpd.conf 或 /etc/apache2/sites-available/000-default.conf),在 <Directory> 块内添加重写规则:
    <Directory "/var/www/html"><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),快速定位配置语法或权限问题

热门AI工具

更多
UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

相关专题

更多
服务器是什么
服务器是什么

服务器是一种计算机硬件设备或软件程序,它具有强大的计算和存储能力,用请求、存储数据和提供服务。它在互联网中着关重要的作用,为用户提供各种服务和资源。本专题为大家提供服务器相关的文章、下载、课程内容,供大家免费下载体验。

437

2023.08.15

连接apple id服务器时出错
连接apple id服务器时出错

连接apple id服务器时出错的原因包括网络连接问题、服务器问题、Apple ID账户问题、设备问题、防火墙或安全软件问题、时间和日期设置问题、Apple服务器维护等。本专题为大家提供apple id相关的文章、下载、课程内容,供大家免费下载体验。

900

2023.09.08

搭建互联网服务器
搭建互联网服务器

搭建互联网服务器需要:1、选择合适的硬件和操作系统,第一步是选择合适的硬件和操作系统;2、安装和配置操作系统,是搭建互联网服务器的关键步骤;3、安装和配置服务器软件,是搭建互联网服务器的下一步,常见的服务器软件包括Apache、Nginx、Tomcat等;4、配置防火墙和安全性,是搭建互联网服务器的重要步骤;5、域名解析和配置,是搭建互联网服务器的最后一步。

2712

2023.09.19

如何查看服务器状态
如何查看服务器状态

查看服务器状态的方法有使用命令行工具、图形界面工具、监控工具、日志文件和远程管理工具等。本专题为大家提供服务器状态相关的文章、下载、课程内容,供大家免费下载体验。

916

2023.10.09

服务器域名转接慢怎么解决
服务器域名转接慢怎么解决

服务器域名转接慢的解决办法有DNS优化、服务器优化、CDN加速、前端优化和网络优化等。本专题为大家提供服务器相关的文章、下载、课程内容,供大家免费下载体验。

809

2023.10.17

服务器评测软件
服务器评测软件

服务器评测软件有PassMark Software、CPU-Z、GPU-Z、CrystalDiskMark、IOmeter、JMeter、LoadRunner、Apache Bench等等。详细介绍:1、PassMark Software是一款综合性的服务器性能测试软件,可以评估服务器在各种负载条件下的性能;2、CPU-Z是一款可以提供服务器CPU详细信息的软件等等。

414

2023.10.17

如何开启TFTP服务器
如何开启TFTP服务器

开启TFTP服务器的步骤包括选择TFTP服务器软件、下载和安装软件、配置TFTP服务器以及启动和测试服务器等。本专题为大家提供服务器相关的文章、下载、课程内容,供大家免费下载体验。

2456

2023.10.18

服务器负载不兼容怎么解决
服务器负载不兼容怎么解决

解决方法:1、增加服务器资源;2、负载均衡;3、优化应用程序;4、增加缓存机制;5、分布式架构;6、限流和熔断;7、自动化扩容。想知道更详细服务器负载不兼容的解决方法,可以访问本专题下面的文章。

4532

2023.10.20

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

100

2026.09.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Apache Maven 官方安装指南
Apache Maven 官方安装指南

共0课时 | 0人学习

Apache Maven 官方用户中心
Apache Maven 官方用户中心

共0课时 | 0人学习

Apache Subversion 官方手册
Apache Subversion 官方手册

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn