XAMPP部署Flutter Web应用教程

本文详解如何用XAMPP正确部署Flutter Web应用——它本质是纯静态文件（HTML/CSS/JS），无需PHP或MySQL，只需将`build/web`产物复制到XAMPP的`htdocs`对应目录，配合`--base-href`指定访问路径，并通过`.htaccess`重写规则实现客户端路由的刷新回退，避开白屏和404陷阱；文章直击常见误操作（如误放整个项目目录）、关键配置要点（base href与重写同步）及多应用共存方案，帮你三步搞定稳定托管。

Flutter Web 本身是编译为静态文件（HTML/CSS/JS）的产物，不能也不需要在 XAMPP 的 Apache 或 PHP 环境里“运行”——它不依赖后端服务，直接由浏览器加载执行。你真正要做的，只是把 build/web 目录里的文件当作纯静态资源，用 XAMPP 提供的 Apache 服务托管起来。

下面说清楚怎么操作、为什么这么操作，以及最容易卡住的地方。

为什么不能直接把 Flutter Web 项目根目录丢进 htdocs

很多人把整个 Flutter 项目（含 lib/、pubspec.yaml、.dart_tool/ 等）复制到 htdocs/my_app，然后访问 http://localhost/my_app，结果白屏或 404。这是因为：

• Flutter Web 构建产物只在 build/web 目录下，其他文件全是开发时用的，Apache 完全不需要它们
• Flutter 使用了基于 URL 路径的客户端路由（比如 /user/profile），但 Apache 默认不会将这些路径回退到 index.html，导致刷新页面 404
• index.html 里引用的 JS/CSS 路径默认是相对根路径（/main.dart.js），如果部署在子目录（如 /my_app/），必须改写 base href 或构建时指定 --base-href

正确部署：先 build，再 copy，最后配 rewrite

步骤很明确，三步缺一不可：

• 在 Flutter 项目根目录执行：flutter build web --base-href "/my_app/"（如果你要部署在 http://localhost/my_app；若部署在根路径，用 --base-href "/"）
• 把生成的 build/web 全部内容复制到 htdocs/my_app/（注意：是内容，不是整个 web 文件夹）
• 在 htdocs/my_app/.htaccess 中添加重写规则，确保所有非静态资源请求都 fallback 到 index.html：

Options +FollowSymLinks
IndexIgnore */*
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^.*$ index.html [L]

没有 .htaccess？XAMPP 默认允许，但需确认 httpd.conf 中 AllowOverride All 已启用（在 块内）。

常见 404 / 白屏问题排查点

部署后打开空白或控制台报 Failed to load resource: the server responded with a status of 404 ()，优先检查：

• index.html 中的 是否与你实际访问路径一致（大小写、末尾斜杠都要匹配）
• 浏览器地址栏 URL 是不是以 /my_app/ 开头（不是 /my_app 少斜杠，也不是 /My_App 大小写错）
• Chrome DevTools 的 Network 面板里，main.dart.js 和 main.dart.js.map 是否返回 200；如果 404，说明路径没对上，不是代码问题，是部署路径或 base href 错了
• 如果用了自定义域名（如 second.com → 11.111.111.11:8081），记得 XAMPP 的 Apache 必须监听 80 端口（或你显式配置 VirtualHost 绑定到 8081），且 Windows 防火墙放行该端口

和 PHP 后端共存时的路径隔离建议

如果你已有 PHP 网站跑在 htdocs/first.com，又想用同一套 XAMPP 托管 Flutter Web 应用，不要混放。推荐做法：

• 为 Flutter Web 单独建子目录：htdocs/second.com/（对应域名 second.com）
• 在 httpd-vhosts.conf 中配 VirtualHost，避免靠子路径硬编码 base href：

<VirtualHost *:80>
    ServerName second.com
    DocumentRoot "C:/xampp/htdocs/second.com"
    <Directory "C:/xampp/htdocs/second.com">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

这样你可以用 --base-href "/" 构建，更干净，也方便后续加 HTTPS 或 CDN。

XAMPP 只是静态文件托管工具，Flutter Web 不吃它任何 PHP/MySQL 功能。关键就三点：build 对路径、copy 对位置、rewrite 对路由。多数失败都出在 base href 和 .htaccess 没同步好，而不是 Flutter 本身有问题。

好了，本文到此结束，带大家了解了《XAMPP部署Flutter Web应用教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！