apache二级目录部署react

在现代前端开发中，将 React 或 Vue 项目部署到 Apache 服务器的二级目录是常见需求，尤其适用于企业级应用或需要整合多个子系统的场景，本文将详细介绍具体部署方法，涵盖环境准备、项目配置、服务器设置及常见问题解决,确保项目能够顺利访问。

环境准备与项目构建

在开始部署前，需确保本地开发环境已完成项目开发，并准备好服务器环境，服务器需安装 Apache（建议版本 2.4+），并开启 mod_Rewrite 模块（用于路由处理），若尚未安装，可通过以下命令启用（以 Ubuntu 为例）：

sudo a2enmod rewritesudo systemctl restart apache2

执行项目构建，以 React（Create React App）和 Vue（Vue CLI）为例，需通过配置修改输出路径,使其适配二级目录：

React 项目配置

在 package.Json 中添加字段,指定二级目录路径，

"homepage": "/subdir"

然后执行构建命令：

npm run build

构建完成后，会生成目录，其中包含 index.html 和静态资源文件。

Vue 项目配置

通过 Vue CLI 的 vue.config.js 文件配置 publicPath ，

module.exports = {publicPath: '/subdir'}

执行构建：

npm run build

生成目录,包含所有静态文件。

服务器目录与权限配置

将构建后的文件（React 的或 Vue 的目录）上传到服务器的指定二级目录，假设 Apache 网站根目录为 /var/www/html ,需创建子目录并设置权限：

sudo mkdir -p /var/www/html/subdirsudo chown -R $USER:$USER /var/www/html/subdirsudo chmod -R 755 /var/www/html/subdir

使用或工具上传文件：

scp -r build/* user@server:/var/www/html/subdir/

Apache 虚拟主机配置

为确保二级目录能正确处理路由（如 React Router 或 Vue Router 的 History 模式），需配置 Apache 的虚拟主机或文件,以下是两种常见配置方式：

虚拟主机配置（推荐）

编辑 Apache 虚拟主机配置文件（如 /etc/apache2/sites-available/000-default.conf ），在标签内添加：

Options Indexes FollowSymLinksAllowOverride AllRequire all granted# 如果使用 History 模式，需添加重写规则RewriteEngine OnRewriteBase /subdirRewriteRule ^index.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /subdir/index.html [L]

保存后重启 Apache：

sudo systemctl restart apache2

使用文件（无需修改虚拟主机）

在二级目录下创建文件,内容如下：

RewriteEngine OnRewriteBase /subdirRewriteRule ^index.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /subdir/index.html [L]

确保 Apache 允许覆盖目录配置（虚拟主机中 AllowOverride All ）。

静态资源路径处理

部署后若出现静态资源（如 CSS、JS、图片）加载失败，通常因路径错误导致,需检查项目构建后的资源路径是否正确包含二级目录：

若仍存在问题，可手动检查 index.html 中的资源引用路径，确保以开头。

常见问题与解决方案

问题现象	可能原因	解决方案
刷新页面 404	未配置 History 模式路由重写	参考“三、Apache 虚拟主机配置”添加重写规则
静态资源加载失败	资源路径缺少二级目录前缀	检查（React）或 publicPath （Vue）配置
目录无访问权限	文件或目录权限设置错误	执行 chmod -R 755 赋予读/执行权限
Apache 重启失败	配置语法错误	使用 apache2ctl configtest 检查语法

通过以上步骤，即可将 React 或 Vue 项目成功部署到 Apache 的二级目录，关键点包括：构建时配置输出路径、服务器目录权限设置、Apache 路由重写规则（尤其是 History 模式）及静态资源路径校验，部署后建议通过浏览器开发者工具检查网络请求，确保资源加载正常，访问刷新页面无 404 错误，若涉及跨域或复杂服务器环境，还需结合具体场景调整配置,确保项目稳定运行。