XAMPP部署Flutter Web教程

本文详解了如何在XAMPP的Apache服务器上正确部署Flutter Web项目，直击“直接将build/web放入htdocs导致子路径404”这一高频痛点——根本原因在于Flutter作为单页应用（SPA）依赖前端路由，而默认XAMPP配置禁用重写模块与.htaccess支持；文章手把手指导启用mod_rewrite、配置AllowOverride All、编写精准的RewriteBase规则，并强调--base-href构建参数与index.html中base标签的协同作用，避免资源加载失败和白屏，帮你绕过本地开发（flutter run）与生产托管的行为差异陷阱，真正实现开箱即用的可靠部署。

不能直接用 XAMPP 的 Apache 模块托管 Flutter Web 项目，因为 htdocs 目录不支持 Flutter 所需的路由重写和单页应用（SPA）行为；必须手动配置 Apache 的 mod_rewrite 并启用 .htaccess 支持，否则所有子路径（如 /about）会返回 404。

为什么直接把 build/web 放进 htdocs 会 404？

Flutter Web 是典型的 SPA，依赖前端路由（Router），所有 URL 都应由 index.html 响应并交由 Dart 运行时解析。但默认 Apache 配置下：

• 访问 http://localhost/about 时，Apache 试图查找 htdocs/about 目录或文件，找不到就返回 404
• htdocs 下未启用 AllowOverride All，导致 .htaccess 被忽略
• mod_rewrite 默认未启用，重写规则根本不会生效

必须启用 mod_rewrite 和 .htaccess 支持

编辑 xampp/apache/conf/httpd.conf，找到对应 DocumentRoot "C:/xampp/htdocs" 的 区块，确保包含以下三行：

Options Indexes FollowSymLinks
AllowOverride All
Require all granted

再确认 httpd.conf 中这行没被注释：

LoadModule rewrite_module modules/mod_rewrite.so

改完重启 Apache（通过 XAMPP 控制面板）。否则哪怕你写了 .htaccess，Apache 也会静默忽略它。

在 htdocs/myapp/ 下放正确的 .htaccess 文件

将 build/web 内容复制到 xampp/htdocs/myapp/ 后，在该目录新建 .htaccess，内容为：

RewriteEngine On
RewriteBase /myapp/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) index.html [L]

注意：RewriteBase 必须与实际 URL 路径一致（比如你用 http://localhost/myapp/ 访问，就得写 /myapp/；若想用根路径，就把文件放进 htdocs/ 并把 RewriteBase 改成 /）。

常见漏点：

• Windows 下记事本保存 .htaccess 可能加了 .txt 后缀，实际变成 .htaccess.txt → 无效
• 路径大小写敏感：Linux/macOS 下 MyApp ≠ myapp，而 Windows 不敏感但建议统一小写
• Flutter 构建时用了 --base-href 参数（如 flutter build web --base-href /myapp/），否则 JS 加载路径会错位

访问时别漏掉 index.html 或 base-href 配置

如果没配 --base-href，又把项目放在子路径（如 /myapp/），浏览器会尝试从根路径加载 main.dart.js，结果 404。正确做法是：

构建命令用：flutter build web --base-href /myapp/

然后确保 build/web/index.html 中的 存在且正确。这个 标签决定所有相对路径的解析起点，漏掉或写错会导致资源全部加载失败，控制台报一堆 Failed to load resource。

复杂点在于：XAMPP 的 Apache 和 Flutter 的本地 flutter run -d chrome 行为不一致——后者自带内存服务器并自动处理 SPA 路由，前者完全依赖你手写的规则和配置。稍有偏差，页面白屏或无限重定向都是常态。

以上就是《XAMPP部署Flutter Web教程》的详细内容，更多关于XAMPP的资料请关注golang学习网公众号！