You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter Web应用能否部署在Hostinger?部署后空白页求助

Flutter Web部署Hostinger类虚拟主机后页面空白的解决方法
  • 修正base href配置
    执行构建命令时必须匹配站点实际路径:

    • 根域名部署:直接运行 flutter build web
    • 子目录部署:运行 flutter build web --base-href "/你的子目录名/"
      部署后检查build/web/index.html里的<base href="/">是否和实际访问路径一致,不一致手动修改。
  • 确保文件完整上传
    将build/web下的所有文件(包括assets、js、css等子文件夹)全部上传到主机网站根目录(如public_html),不要遗漏任何子目录或文件。

  • 配置URL重写规则
    Flutter Web是单页应用,需在主机根目录创建.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>
    

    若为子目录部署,将RewriteBase /改为RewriteBase /你的子目录名/。

  • 排查浏览器控制台错误
    按F12打开浏览器开发者工具,查看Console标签下的报错:

    • 若出现404错误,说明资源路径配置错误,回到第一步检查base href和文件上传位置;
    • 若有CORS或权限错误,联系主机服务商调整相关设置。
  • 确认HTTPS配置(若使用)
    若站点启用HTTPS,确保主机已配置有效SSL证书,且index.html中所有资源引用均为HTTPS(Flutter默认构建会自动处理,手动修改过则需检查)。

内容的提问来源于stack exchange,提问作者Pawan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.09 18:22:06