Flutter web 打包部署到 uniCloud 免费的前端网页托管平台

一、打包步骤

1、flutter 版本需要 2.0 以上，2024 年了大家估计都已经是用 3.0 及以上版本了吧

dart 复制代码

Flutter 3.10.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f468f3366c (9 months ago) • 2023-07-12 15:19:05 -0700
Engine • revision cdbeda788a
Tools • Dart 3.0.6 • DevTools 2.23.1

2、如果项目的根目录没有 web 文件夹，创建一个一个文件夹支持 web 开发

dart 复制代码

flutter create .

3、使用如下三种方式构建 web 项目

java 复制代码

//建议打包之前执行下 flutter clean
flutter clean

dart 复制代码

//1、使用HTML渲染器打包，该渲染器提供的打开速度最快，并且具有良好的浏览器兼容性（例如IE, Chrome, Safari等）
flutter build web --web-renderer html
//2、使用默认设置进行打包，提供的打开速度为一般，但依然保持良好的浏览器兼容性
flutter build web
//3、使用CanvasKit渲染器进行打包，虽然打开速度是最慢的，但依然具有良好的浏览器兼容性
flutter build web --web-renderer canvaskit

二、遇到的问题及对应的解决方式

1、直接运行，页面空白、Flutter Web的行为和传统的前端web开发不一样，不支持直接点击index.html文件进行访问。需要部署到一个服务器容器中,例如tomcat

2、如果你没有服务器，可以开通一个 uniCloud 的云服务，选择阿里云有免费服务空间。创建一个服务空间，选择前端静态网页托管

新建一个文件夹，将打包成功的/build/web目录下的所有文件和文件夹 都上传到你在前端网页托管 新建的文件夹里面

上传成功之后的页面如下：

在前端网页托管-参数配置中有个默认域名,你在你的默认域名后面+"/index.html"就可以访问你的 flutter web应用了，但是当你敲下回车后会发现页面依然是空白的。

解决方式1

html 复制代码

修改index.html中的<base href="/">为<base href="">
<!-- 
  方法一
  修改前 <base href="/">
  修改后 <base href="">
 -->
<base href="">

解决方式2

html 复制代码

将<base href="/">修改为你的云服务器路径
<!-- 
  方法一
  修改前 <base href="/">
  修改后 <base href="static-mp-c60babca-4df2-48ba-8733-29e020444a83.next.bspapp.com/article-manage/">
 -->
<base href="static-mp-c60babca-4df2-48ba-8733-29e020444a83.next.bspapp.com/article-manage/">

修改完成后重新上传这个文件到对应云服务目录，再次访问域名/+文件夹名称/+index.html就可以正常访问 flutter 开发的 web 页面了，

内容也会加载显示正常。

例如：xxxxx/article-manage/index.html