apache二级目录部署react/vue项目后刷新404，如何解决路由问题？

在现代前端开发中，React和Vue作为两大主流框架，其单页应用（SPA）的部署是项目上线的关键环节，当需要在同一台服务器上部署多个应用，或希望将前端应用集成到现有后端服务的二级目录下时，Apache服务器的配置就显得尤为重要，本文将详细介绍如何使用Apache服务器为React或Vue应用配置二级目录部署，涵盖环境准备、项目构建、配置修改及常见问题解决等关键步骤,确保部署过程顺利且高效。

环境准备与项目构建

在开始配置之前，需确保服务器环境已满足基本要求，Apache服务器需已安装并正常运行，同时启用mod_rewrite模块以支持URL重写功能，可通过终端执行a2enmod rewrite命令启用该模块，并重启Apache服务使配置生效，确保项目中已安装Node.js和npm（或yarn）,用于执行构建命令。

对于React项目，使用Create React App创建的应用默认支持静态导出，在项目根目录下执行npm run build命令，会在build文件夹中生成静态资源文件，包括index.html、js、css等，对于Vue项目，若使用Vue CLI创建，可通过配置vue.config.js中的outputDir和publicPath选项，指定构建输出的目录和公共路径，将publicPath设置为'/subdir/'（subdir为二级目录名称），执行npm run build后，静态资源将生成在dist文件夹中,且资源路径会自动添加前缀。

Apache服务器配置

项目构建完成后，需将静态文件上传至服务器的指定目录，通常为Apache的默认网站根目录（如/var/www/html）或自定义目录，假设需要将React/Vue应用部署在/var/www/html/webapp目录下，且二级目录名称为subdir,则需进行以下配置：

创建目录并上传文件

在服务器上创建/var/www/html/webapp目录，将构建后的静态文件（如React的build文件夹或Vue的dist文件夹）内容上传至该目录，确保目录权限正确，Apache用户（通常为www-data）具有读取和执行权限。

配置VirtualHost

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

<Directory "/var/www/html/webapp/subdir">
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>
Alias /subdir "/var/www/html/webapp/subdir"
<Directory "/var/www/html/webapp/subdir">
    RewriteEngine On
    RewriteBase /subdir/
    RewriteRule ^index.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /subdir/index.html [L]
</Directory>

配置说明

• Alias指令：将URL路径/subdir映射到服务器的/var/www/html/webapp/subdir目录。
• Directory块：设置目录权限，AllowOverride All允许.htaccess文件覆盖配置，Require all granted允许所有用户访问。
• RewriteEngine与RewriteRule：实现SPA的路由回退，确保所有非文件/非目录请求都指向index.html,避免刷新页面时出现404错误。

启用配置并重启服务

保存配置文件后，执行sudo a2ensite 000-default.conf（若配置已启用则跳过），然后重启Apache服务：sudo systemctl restart apache2。

React与Vue项目的特殊处理

React项目（Create React App）

默认情况下，Create React App的构建文件可直接部署，但需注意build/index.html中的资源路径是相对路径，若部署在二级目录下，可通过package.json中的homepage字段指定路径，

"homepage": "/subdir",

重新构建后,资源路径将自动添加前缀。

Vue项目（Vue CLI）

在vue.config.js中配置：

module.exports = {
  publicPath: '/subdir/',
  outputDir: 'dist',
  assetsDir: 'static'
}

构建后，dist/index.html中的资源路径会正确引用/subdir/前缀。

常见问题与解决方案

优化与扩展

部署完成后，可进一步优化性能和安全性，启用Gzip压缩（通过mod_deflate模块）减少传输体积，配置缓存策略（如ExpiresActive On）提升静态资源加载速度，或使用HTTPS协议保障数据传输安全，对于多应用场景，建议为每个应用配置独立的虚拟主机,避免相互干扰。

通过以上步骤，即可完成React/Vue应用在Apache二级目录下的部署，关键在于正确配置静态资源路径和路由回退规则，同时确保服务器权限和模块支持到位，合理的部署方案不仅能提升用户体验,还能为后续的运维和扩展奠定坚实基础。