如何将Flutter Web应用以指定应用名部署到Tomcat服务器

仅修改manifest.json的start_url不生效是因为Flutter Web的资源加载基准路径由构建时的--base-href参数决定，优先级高于manifest配置，按以下步骤操作即可：

1. 配置Flutter Web构建参数 #

• 构建web产物时需添加--base-href参数，参数值为你指定的Tomcat应用名称，前后需包裹斜杠。假设你要设置的应用名称为my_flutter_app，最终访问路径为http://Tomcat地址:端口/my_flutter_app/，执行以下构建命令：
  flutter build web --base-href "/my_flutter_app/"

2. 校验构建产物配置 #

• 进入生成的build/web目录，打开index.html文件，确认<head>标签内存在<base href="/my_flutter_app/">配置，且值和你设置的应用路径一致
• 打开同目录下的manifest.json文件，确认start_url、scope两个参数的值均为/my_flutter_app/，若不一致手动修改为匹配值即可

3. 部署到Tomcat服务器 #

• 打开Tomcat安装目录下的webapps文件夹，新建文件夹，名称和你指定的应用名称完全一致，比如前面的my_flutter_app
• 将build/web目录下的所有文件，完整复制到刚才新建的my_flutter_app文件夹内
• 启动Tomcat服务，访问http://你的Tomcat服务地址:端口/my_flutter_app/即可正常打开应用

常见问题修复 #

如果出现路由跳转后刷新页面404，可通过Tomcat错误页配置解决：

• 打开Tomcat安装目录下的conf/web.xml文件，拉到文件末尾，添加如下配置：

<error-page>
  <error-code>404</error-code>
  <location>/my_flutter_app/index.html</location>
</error-page>

• 注意将上述配置中的my_flutter_app替换为你自己的应用名称，保存后重启Tomcat即可生效

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