Flutter Web应用刷新出现404错误，Apache服务器部署求助

问题概述 #

部署在Apache服务器子目录下的Flutter Web应用，刷新页面时触发404错误：

404 Not Found - "The requested URL was not found on this server."

本地运行正常，因存在两个主式子目录，无法固定设置<base href="/myapp/">，现有配置调整后未解决问题。

当前已配置文件 #

.htaccess #

<IfModule mod_rewrite.c>
    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [L]
</IfModule>

default.conf（Nginx配置，当前使用Apache可忽略） #

# Default server configuration
server {
  listen 80 default_server;
  listen [::]:80 default_server;

  root /var/www/html/appname;
  index index.html index.htm;

  server_name _;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

web.config（IIS配置，Apache不识别，已添加但无效） #

<?xml version="1.0"  encoding="utf-8" ?>

<configuration>
  <system.webServer>
    <staticContent>
      <!-- JSON Manifests -->
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <!-- Fonts -->
      <mimeMap fileExtension=".otf" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".ttc" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <mimeMap fileExtension="woff" mimeType="application/font-woff" />
      <mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
    </staticContent>
  </system.webServer>
</configuration>

可尝试的解决步骤 #

• 启用Apache mod_rewrite模块
  执行以下命令启用重写模块并重启服务：

  sudo a2enmod rewrite
  sudo systemctl restart apache2
  

• 调整.htaccess适配子目录

  1. 在Apache主配置或站点配置中添加目录权限设置，允许.htaccess生效：

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

  2. 确保每个子目录（如/myapp1/、/myapp2/）下都有独立的.htaccess，保持Front Controller规则指向当前目录的index.html：

     RewriteRule ^ index.html [L]
     

• 动态设置base href
  在index.html中添加JS代码，自动根据当前URL路径设置base href：

  <base href="/">
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const pathSegments = window.location.pathname.split('/').filter(seg => seg);
      if (pathSegments.length > 0) {
        document.querySelector('base').setAttribute('href', `/${pathSegments[0]}/`);
      }
    });
  </script>
  

• 清理无效配置文件
  删除web.config（IIS专用）和default.conf（Nginx专用），避免配置混淆。

• 检查端口占用情况
  确认Apache占用80端口，无其他服务抢占，执行命令验证：

  sudo lsof -i :80
  

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