apache二级目录部署react/vue，路径404怎么解决？

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

环境准备与项目构建

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

sudo a2enmod rewrite
sudo systemctl restart apache2

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

React 项目配置

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

"homepage": "/subdir"

然后执行构建命令：

npm run build

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

Vue 项目配置

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

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

执行构建：

npm run build

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

服务器目录与权限配置

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

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

使用 scp 或 rsync 工具上传文件：

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

Apache 虚拟主机配置

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

虚拟主机配置（推荐）

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

<Directory /var/www/html/subdir>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>
# 如果使用 History 模式，需添加重写规则
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /subdir
    RewriteRule ^index.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /subdir/index.html [L]
</IfModule>

保存后重启 Apache：

sudo systemctl restart apache2

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

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

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /subdir
    RewriteRule ^index.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /subdir/index.html [L]
</IfModule>

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

静态资源路径处理

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

• React：构建后的 index.html 中资源路径会自动添加 /subdir 前缀（因 homepage 配置）。
• Vue：publicPath 配置会确保资源路径正确。

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

常见问题与解决方案

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