Ubuntu Apache2部署VueJS应用路由访问404问题求助

问题场景 #

• 在Ubuntu服务器通过Apache2部署Vue应用，构建后的dist目录已放置到/var/www/html/路径
• Vue Router采用history模式，首页可正常加载，但访问任意子路由（如http://<公网IP>/device/:id）时，Apache返回404错误
• 服务器同时运行着监听8080端口的Node.js(Express) API后端，设备页需调用该接口

排查过程 #

• 最初按照常规history模式配置了.htaccess和虚拟主机，但问题未解决
• 尝试第三方方案时发现MultiViews指令无效，删除该配置后仍报错
• 确认服务器虚拟主机配置文件为000-default.conf（而非常见的default.conf），调整配置后依旧无法访问子路由
• 最终定位核心问题：替换dist文件时误删除了.htaccess文件

正确配置步骤 #

1. 启用Apache重写模块 #

首先确保mod_rewrite模块已启用，这是history模式路由生效的基础：

sudo a2enmod rewrite
sudo systemctl restart apache2

2. 配置虚拟主机（000-default.conf） #

编辑默认虚拟主机配置文件：

sudo nano /etc/apache2/sites-available/000-default.conf

在<VirtualHost *:80>代码块内添加或修改目录权限配置：

DocumentRoot /var/www/html
<Directory /var/www/html>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

保存退出后重启Apache服务：

sudo systemctl restart apache2

3. 重建.htaccess文件 #

在/var/www/html/目录下创建.htaccess文件，写入以下重写规则：

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

该规则会将所有非静态资源的请求转发到index.html，由Vue Router处理路由逻辑。

4. 额外：Express API反向代理配置（可选） #

若需让Vue应用访问同服务器8080端口的API，可通过Apache反向代理避免跨域问题：

1. 启用代理相关模块：

sudo a2enmod proxy proxy_http
sudo systemctl restart apache2

2. 在000-default.conf的<VirtualHost *:80>块内添加代理规则：

ProxyPass /api http://localhost:8080/api
ProxyPassReverse /api http://localhost:8080/api

配置完成后，Vue应用中API请求路径可直接写为/api/xxx，无需指定完整的IP和端口。

内容的提问来源于stack exchange，提问作者VitoCK